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怎么用？的详细内容，更多请关注易知道|edz.cc其它相关文章！
