Question

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

左侧边栏导航条。。。。实在没有分了。谢谢大神 - -！

Answer 1

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、然后就可以了。

Answer 2

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

追问

是的。谢谢，已经可以了。怎么才能做到下滑到某一位置，对应的导航栏目高亮呢

追答

这需要使用js，设置触发条件，添加高亮的css样式，这个思路能理解吧

追问

能理解，但是我不会js - -!，还在学习中， 还是非常谢谢你

追答

加油

Answer 3

1，css 设置div 相对整个body 绝对定位
2，js
$('div').animate({ top: $(window).scrollTop() + $('div').position().top,300 })
这句js 写在window 滚动事件里面

追问

朋友，也谢谢你。只是上面的朋友先回答了