我有一个靠近页面顶部的导航容器,当页面滚动超过某个值时,应该添加或删除类名“卡住”(在位置:静态和位置:固定之间切换).似乎在FF和Chrome中工作正常,但当然IE(7,8和9)有问题.
当使用鼠标滚轮滚动时页面严重滞后(基本上无法使用),但如果我抓住并拖动水平滚动条,则页面平滑地滑动而没有延迟.
我的搜索显示,这可能是因为IE执行的滚动事件比其他浏览器更多,但我无法弄清楚如何限制被触发的事件的数量.您可以在下面的代码块中看到我也在使用“滚动停止”解决方案,但我真的还需要能够执行回调,而用户在超出页面上的某个点时仍在滚动.
我认为我实现它的方式非常简洁,基本没有,但有没有更好的方法来处理这个问题,至少对于IE来说?
var scrollValue = 0;
var scrollTimer = false;
$(window).bind('scroll', function(){
scrollValue = $(window).scrollTop();
// SET TIMER DELAY FOR SCROLL-STOP
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(scrollStopped, 25);
// STICK/UNSTICK HEADER
if (scrollValue > 320){
if (!$(stickyWrap).hasClass('stuck')){
$(stickyWrap).addClass('stuck')
}
} else {
if ($(stickyWrap).hasClass('stuck')){
$(stickyWrap).removeClass('stuck');
}
}
});
解决方法:
关机超时,开关关机
如果你让jQuery变得更简单,并且添加了一个只在阈值之前和之后执行任何操作的开关,它应该可以很快地加速.
var header = $('.stickyWrap'),
trig = 320,
go = true;
$(window).bind('scroll', function(){
var scrollValue = $(this).scrollTop();
if ((go && scrollValue > trig) || (!go && scrollValue <= trig)) {//before or after
header.toggleClass('stuck');//toggle class
go ? go = false : go = true;//toggle boolean
}
});
现在它只会尝试在超过320的阈值之前和之后执行任何操作.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。