zoukankan      html  css  js  c++  java
  • position:sticky

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

    position:sticky用法

    position:sticky是一个新的css3属性,它的表现类似position:relativeposition: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简单实现:

    HTML
    <div class="header"></div>
    
    CSS
     .sticky { position: fixed; top: 0; } .header {  100%; background: #F6D565; padding: 25px 0; }
    
    JS
     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);
    

     

    本文来自博客园,作者:喆星高照,转载请注明原文链接:https://www.cnblogs.com/houxianzhou/p/13920659.html

  • 相关阅读:
    ef mysql
    mvc RedirectToAction、mobile 重定向地址栏未改变
    避免复制引用程序集的XML文件
    端口扫描工具
    Python简单全双工聊天器
    Python半双工聊天程序
    Python简单服务器程序
    python+scrapy爬取亚马逊手机商品
    python+scrapy爬取知乎日报全站文章
    简单直接排序
  • 原文地址:https://www.cnblogs.com/houxianzhou/p/13920659.html
Copyright © 2011-2022 走看看