zoukankan      html  css  js  c++  java
  • CSS3的position:sticky介绍

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域。position:sticky为此而生。

    position:sticky用法

    position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。

    使用起来也非常简单:

    .sticky {
      position: -webkit-sticky;
      position:sticky;
      top: 15px;
    }

    目前来说还需要用私有前缀

    浏览器兼容性:

    由于这是一个全新的属性,以至于到现在都没有一个规范,W3C也刚刚开始讨论它,而现在只有webkit nightly版本和chrome 开发版(Chrome 23.0.1247.0+ Canary)才开始支持它。

    另外需要注意的是,如果同时定义了left和right值,那么left生效,right会无效,同样,同时定义了top和bottom,top赢~~

    fall back

    虽然其它浏览器尚不支持,但是实现起来其实不难,我们可以用js简单实现:

    <div class="header"></div>
    .sticky {
      position: fixed;
      top: 0;
    }
    .header {
      width: 100%;
      background: #F6D565;
      padding: 25px 0;
    }
    var header = document.querySelector('.header');
    var origOffsetY = header.offsetTop;
     
    function onScroll(e) {
      window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                      header.classList.remove('sticky');
    }
     
    document.addEventListener('scroll', onScroll);
  • 相关阅读:
    js图片飘动
    实战ASP.NET大规模网站架构:Web加速器(1)【转】
    DNS服务器设置详解
    Lucene:基于Java的全文检索引擎简介【转】
    传道解惑 软件开发技术名词解密(转载)
    UTF8 and Unicode FAQ
    高并发 高负载 网站系统架构 !深入讨论!【转载】
    (转)值的关注的Java开源项目
    MSDN:Webcast 系列课程
    ASP.NET MVC 学习网站
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/3822364.html
Copyright © 2011-2022 走看看