技术好文：sticky的使用

"

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

于position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件//代码效果参考：https://v.youku.com/v_show/id_XNjQwNjg0MzA3Ng==.html

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

使用注意事项：

父元素不能有overflow属性

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

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

ios加前缀-webkit-sticky（考虑到兼容问题）

使用方法：

.sticky{

position: sticky;

position: -webkit-sticky;

Width＜/span>: 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);

//代码效果参考：https://v.youku.com/v_show/id_XNjQwMDM5ODU1Ng==.html

div = null;

return isSupport;

};