页面滑动到一定的位置，让导航固定在顶部

最新推荐文章于 2022-07-15 15:09:25 发布

原创最新推荐文章于 2022-07-15 15:09:25 发布 · 7.2k 阅读

21 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

3 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

本文介绍了使用jQuery和原生JavaScript实现页面滚动时顶部导航栏固定效果的两种方法。通过监听滚动事件，当滚动距离超过设定值时，导航栏将被固定在页面顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我使用了两种方法先介绍jQuery的这个的代码少

监听滚动事件
        $(window).on("scroll",function(){
            //判断向下滑动的距离
            if($(window).scrollTop()>=100){
                //将顶部导航栏固定
                $(".nav").addClass("fixed");
            }else{
                $(".nav").removeClass("fixed");
            }
        });

记得引入jQuery

里面的fixed是类名给的css样式

.fixed {

position: fixed;

top: 0;

z-index: 99;

}

下面这个用的js写的

 //监听滚动事件
        window.onscroll = function () {
            // 滚动时当前位置距顶部的距离
            var topScroll = document.documentElement.scrollTop;
            console.log(topScroll)
            // 获取导航id
            var nav = document.getElementById("nav");
            // 滚动距离大于多少时执行下面事件
            if (topScroll > 100) {
                // console.log(ihkh)
                // 到了那个距离相当于给了导航定位
                nav.style.position = 'fixed';
                nav.style.top = '0';
                nav.style.zIndex = '99'
            } else {
                // 小于的时候让他恢复原状
                nav.style = ''
            }
        }

注：jQuery的.nav用的是类名 JavaScript的nav用的id名