position:sticky使用

[fayching]

网上有很多介绍position: sticky的用法，移动端目前ios能够支持，实现出来的效果十分顺滑流畅。但即使是ios在使用时也有一些坑，导致有人会误以为这个属性不能使用：

1、具有sticky属性的元素，其父级高度必须大于sticky元素的高度。
2、sticky元素的底部，不能和父级底部重叠。
3、sticky元素的父级不能含有overflow:hidden 和 overflow:auto 属性
4、必须具有top，或 bottom 属性。
所以我们可以在需要stiky的元素外包一层，给这一层设一个更高的高度：

.sticky-wrap {
position: relative;
position: -webkit-sticky;
position: sticky;
top: 0;
height: 45px;
}
.sticky-content {
width: 100%;
background: #F6D565;
height: 44px;
line-height: 44px;
}
.sticky-wrap.sticky .sticky-content {
position: fixed;
top: 0;
}
dom结构：

内容

test1

不支持此属性的使用js实现：

var offsetTop = $('.sticky-wrap').offset().top;
$(window).scroll(function(){
if($('.sticky-wrap').css("position").indexOf("sticky") == -1){
//不支持时做的操作
if(document.body.scrollTop >= offsetTop){
$('.sticky-wrap').addClass('sticky');
}else{
$('.sticky-wrap').removeClass('sticky');
}
}
});
效果参考http://output.jsbin.com/rofirokemo

如果页面有多个tab条想要置顶呢，也就是下面这种效果

ios使用上面的css即可做成这种效果，android需要改动一下js的循环：

var length = $('.sticky-wrap').length;
var offsetTop = [];
for(i=0; i<length; i++){
offsetTop[i] = $('.sticky-wrap').eq(i).offset().top;
}
$(window).scroll(function(){
if($('.sticky-wrap').css("position").indexOf("sticky") == -1){
//不支持时做的操作
for(i=0; i<length; i++){
if(document.body.scrollTop >= offsetTop[i]){

            $('.sticky-wrap').removeClass('sticky');
            $('.sticky-wrap').eq(i).addClass('sticky');
        } else if(document.body.scrollTop  < offsetTop[0]){
            $('.sticky-wrap').removeClass('sticky');
        }     
    }
}

});
可以参考 demo：http://output.jsbin.com/vudabilofi

在android上因为惯性滑动的原因效果会有延时，这个就要看实际需求的取舍了，选择android不用这个效果去掉js即可。