一段js用来控制左侧的导航栏滑到底部时固定右侧继续滑动,但问题是将页面滚动到下边刷新左边不会滚下来了

JavaScript017

一段js用来控制左侧的导航栏滑到底部时固定右侧继续滑动,但问题是将页面滚动到下边刷新左边不会滚下来了,第1张

依靠css 将页面

document.documentElement.style.overflow='hidden'

document.body.style.overflow='hidden'//手机版设置这个。

如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。

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

$(window).scroll(function () {

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

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

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

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

          for (var i = 0i <lengthi++) {

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

一个简单的解决方案:顶端固定一个DIV作为导航容器,该DIV左端和右端分别用DIV模拟向左和向右的按钮,中间区域呈现导航按钮,计算当前位置,用模拟的按钮控制左右滚动。

另,你说的手机端用手指滑动,在 HTML 中是由浏览器根据手势触控事件来支持的,jQuery 超越不了浏览器对 JS 的支持,因为 jQuery 就是 JS 的程序包。如果使用 Mouse 事件来实现,也不是不可以,因为手势触控的本质无非还是 Mouse 事件同源的衍生计算。费老鼻子劲使用 Mouse 事假实现一个有加速减速效果的导航滑动,不经济。供参考。