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