正文
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元素占位，消除下部元素快速向上移动的问题。
如有错误，各位大牛敬请指出！
