滚动页面一定距离后固定导航条

Posted 2020-10-09 开发的点点滴滴

需求：滚动页面到一定距离后，页面中间的导航条固定到页面的某个位置不动，滚回去时会复原。

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>