我有一个 jquery 代码,当我向上/向下滚动页面时,它会更改我的 css 类。这解决了我的目的,但每次我滚动页面时它都会触发事件,我担心这可能会影响网站性能。
那么有什么办法让它只触发一次,除非我向相反方向滚动?
PS:由于某些原因我不想使用鼠标滚轮功能。只是想改进这段代码。我也不太擅长编码,所以简单的语言将受到赞赏。 :)
这是我的 jquery 代码:
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
_direction = 'down';
$("#my_div").removeClass("up").addClass("down");
}
else
{
_direction = 'up';
$("#my_div").removeClass("down").addClass("up");
}
_top = _cur_top;
console.log(_direction);
});
});
这是 fiddle 。 https://jsfiddle.net/ramansharma89/9sdkyhss/
最佳答案
只需检查您是否已经操作过类(class)更改
if(_top < _cur_top && _direction !== "down")
{
// [...]
}
else if(_top >= _cur_top && _direction !== "up")
{
// [...]
}
这将使回调变得轻量级,即使重复触发滚动事件,性能也不会受到影响。
你的整个代码片段变成:
$(function(){
var _top = $(window).scrollTop();
var _direction = "";
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top && _direction !== "down")
{
_direction = 'down';
$("#my_div").removeClass("up").addClass("down");
}
else if(_top >= _cur_top && _direction !== "up")
{
_direction = 'up';
$("#my_div").removeClass("down").addClass("up");
}
_top = _cur_top;
console.log(_direction);
});
});
关于jquery - 除非另有说明,否则每次我向同一方向滚动时都会阻止 .scroll 事件触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39292003/