如何实现网页导航栏随着网页滚动下滑

发布网友 发布时间：2022-04-26 09:01

我来回答

共3个回答

热心网友 时间：2022-04-07 08:08

1、首先输入下方的代码：

$(window).scroll(function () {

              var $nav = $(".floatingMenu ul li"), 

                 length = $nav.length-1,//获取导航菜单 ul li 的个数 

                 item = new Array(),//新建一个数组 

                 sTop = $(window).scrollTop();//获取偏移的高度 

             for (var i = 0; i < length; i++) {

2、然后输入下方的代码：

if (i == 0) { 

                     item[i + 1] = $(".blockList>div:first-child").offset().top; 

                     if (sTop >= item[i + 1]) {

                         $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");//选中的样式selected

                     }

                 } else {

3、然后输入下方的代码：

item[i + 1] = $(".blockList>div:nth-child(" + (i + 1) + ")").offset().top;

                     if (sTop >= item[i + 1] - 100) {

                         $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");

                    }

                 }

             }

         })

4、然后就可以了。

热心网友 时间：2022-04-07 09:26

是鼠标下滑，导航栏也下滑位置不变吗，那可以使用绝对定位，根据浏览器做定位，就是css样式position: fixed;然后设置top离头部的距离即可。

热心网友 时间：2022-04-07 11:01

1，css 设置div 相对整个body 绝对定位
2，js
$('div').animate({ top: $(window).scrollTop() + $('div').position().top,300 })
这句js 写在window 滚动事件里面追问朋友，也谢谢你。只是上面的朋友先回答了