滾動頁面一定距離后固定導航條

需求：滾動頁面到一定距離后，頁面中間的導航條固定到頁面的某個位置不動，滾回去時會復原。

document.addEventListener('scroll', function (event) { 
    var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollDistance >= 230) {    // 觸發的位置
        document.getElementsByClassName('nav-items‘)[0].style.cssText = 'position:fixed;top:-10px;';
    } else {
        document.getElementsByClassName('mu-tabs')[0].style.cssText = 'position:static;';
    }
});

注意：

1.子元素和父元素都有滾動條時，滾動鼠標滾輪：

　　鼠標在父元素中，頁面只滾動父元素；鼠標在子元素中時，頁面只滾動子元素，只有當子元素滾到底之后，才會滾動父元素。

　　如果要在子元素中直接滾動父元素，只能先把子元素的滾動條消除，如把子元素的容器高度設置成auto，或通過mousewheel/touchmove事件函數處理。

2.元素的position從static變為fixed時，會從原來的文檔流中刪除，高度發生變化，導致頁面有輕微的跳動。解決方法是在導航條外層加一個高度相同的容器包裹一下。

<div class='navsContainer'>
    <ul class='nav-items'>
        <li>index</li>
        <li>details</li>
        <li>about</li>
    </ul>
</div>