CSS布局技巧 -- sticky属性

在一些很长的表格中，往往需要使用表头悬浮的设计以方便用户使用，例如H5电商页面通过下滑展示大量商品列表时，顶部的导航栏需要在离开屏幕时，需要固定在屏幕顶部以方便用户筛选类别。这种效果一直以来需要通过JavaScript来实现，此外，由于设置对应的DOM对象为fixed时会脱离常规流，会导致下部元素对象瞬间向上移动，影响用户体验。CSS3中的position:sticky为解决这些问题而生。

position:sticky用法

sticky是CSS3的一个新属性，对象在常态时遵循常规流，如relative属性。但是，当对象滑动到屏幕外时则吸附在屏幕中设置的固定位置，如fixed属性。简而言之，sticky属性就像relative和fixed的合体，同时很好的解决对象脱离常规流时带来的下部对象瞬间偏移的问题。

.sticky {

    position: -webkit-sticky;

    position:    -moz-sticky;

    position:     -ms-sticky;

    position:         sticky;

    top: 1px;

}

由于样式尚未进入标准，必须使用私有前缀。

浏览器兼容性

虽然很多浏览器不支持sticky属性，但是可以通过JavaScript简单实现这种效果：

.sticky {

    position: -webkit-sticky;

    position:    -moz-sticky;

    position:     -ms-sticky;

    position:         sticky;

}

.header {

    width: 100%;

    height: 20px;

    background: #fcc;

}

.empty {

    width: 100%;

    height: 20px;

}

.hidden {

    display: none;

}

<section>

    <div class="header"></div>

    <div class="empty hidden"></div>

</section>

var $win = $(window),

      $header = $('.header'),

      $empty = $('.empty');

$win.on('scroll', function(event) {

     if($win.scrollTop() > $header.offset().top) {

         $header.addClass('sticky');

         $empty.removeClass('hidden');

     } else if($win.scrollTop() < $empty.offset().top) {

         $header.removeClass('sticky');

         $empty.addClass('hidden');

     }

});

其中，当header对象脱离常规流时，使用empty元素占位，消除下部元素快速向上移动的问题。

如有错误，各位大牛敬请指出！

巴特西

CSS布局技巧 -- sticky属性

最新文章

热门文章