鼠标往下滚动，导航栏固定在最顶部

最新推荐文章于 2026-06-07 09:34:30 发布

原创最新推荐文章于 2026-06-07 09:34:30 发布 · 1.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js固定导航栏

收录于

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的页面滚动效果，当页面滚动超过一定距离时，导航栏会固定在顶部。通过监听窗口滚动事件并获取滚动位置，调整导航栏的位置属性。

window.onscroll = function(){
    var topScroll = getScrollTop();//滚动的距离，距离顶部的距离
    var bignav = document.getElementById('bignav');
    if (topScroll > 150){          //滚动的高度
        bignav.style.position = 'fixed';
        bignav.style.top = '0';
        bignav.style.zIndex = '1000000';
    } else {
        bignav.style.position = 'static';
    }
};

function getScrollTop(){
    var scrollTop;
    if(typeof window.pageYOffset != 'undefined'){             //pageYOffset指的是滚动条顶部到网页顶部的距离
        scrollTop = window.pageYOffset;
    }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')        {
        scrollTop = document.documentElement.scrollTop;
    }else if(typeof document.body != 'undefined'){
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}