sticky的使用

position: sticky粘性定位：是css新增的一个position属性。说是对于IOS的兼容性好一点，对于安卓的兼容性不太好（我自己感觉安卓的兼容性也不错）

于position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。

适用场合：一开始不显示，滚动到一定位置需要显示的元素

使用注意事项：

1. 父元素不能有overflow属性
2. left、top、right、bottom必须要有一个
3. 仅在父元素内生效，父元素的高度必须大于sticky元素的高度
4. ios加前缀-webkit-sticky（考虑到兼容问题）

使用方法：

.sticky{
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    left: 0;
    top: 20px;
}

js检查是否支持sticky属性：

var isSupportSticky = function() {
    var prefixTestList = ['', '-webkit-', '-ms-', '-moz-', '-o-'];
    var stickyText = '';
    for (var i = 0; i < prefixTestList.length; i++) {
        stickyText += 'position:' + prefixTestList[i] + 'sticky;';
    }
    // 创建一个dom来检查
    var div = document.createElement('div');
    div.style.cssText = stickyText;
    document.body.appendChild(div);
    var isSupport = /sticky/i.test(window.getComputedStyle(div).position);
    document.body.removeChild(div);
    div = null;
    return isSupport;
};

 

转载于:https://www.cnblogs.com/zsj-02-14/p/11251773.html