定位导航滚动（导航定位图）

本文目录一览：

• 1、如何实现网页导航栏随着网页滚动下滑
• 2、怎么做一个网页定位导航，菜单页面可以滚动相应模块
• 3、如何设置左侧导航网页中部跟随滚动条浮动？
• 4、我用css定位了导航，怎么当网页下拉到一定高度的时候变成悬浮的？

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

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] = $(".blockListdiv:first-child").offset().top;

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

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

                   }

               } else {

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

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

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

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

                  }

               }

           }

       })

4、然后就可以了。

怎么做一个网页定位导航，菜单页面可以滚动相应模块

这个可以用锚链接来做。

使用语法：

1、需要转到地方添加，a href="#命名"文字/a，注意href值是#开头+英文字母命名

2、需要在被转到位置添加，span id="命名" name="命名"/span，注意id和name值相同并且与a命名相同

如何设置左侧导航网页中部跟随滚动条浮动？

使用css中的绝对定位，设置定位参数。

详解如下：

1、对左侧导航设置绝对定位。

2、设置相应的距离网页顶部固定距离。

3、你的左侧导航会随着滚动条向下滑动，并与顶部保持一定距离。

我用css定位了导航，怎么当网页下拉到一定高度的时候变成悬浮的？

1、正常布局网站，导航栏也正常布局。

2、自定义导航栏制作（可复制原来的导航栏，也可以另制作一份），绝对定位，隐藏。

3、在页面scroll事件中进行判断，滚动到指定像素位置，自定义的导航栏出现，并且随着scroll事件对top值不断更新，一句jquery的scrollTop。

4、如果向上回滚，判断scrollTop值，隐藏自定义导航栏。