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 事假实现一个有加速减速效果的导航滑动,不经济。供参考。