css sticky怎么用？

position属性设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点：

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。

• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

CSS中的position: sticky让我们可以在很少的代码行中构建一些非常简洁的交互。当用户滚动时希望UI元素在视图中留在任何时候它都很有用，但是直到该元素与滚动视窗的顶部/底部/左侧/右侧的egde达到特定距离时才变得粘性。

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

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

使用注意事项：

• 父元素不能有overflow属性

• left、top、right、bottom必须要有一个

• 仅在父元素内生效，父元素的高度必须大于sticky元素的高度

• 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;
};

更多前端开发知识，请查阅 HTML中文网 ！！

以上就是css sticky怎么用？的详细内容，更多请关注0133技术站其它相关文章！