jQuery - 滚动事件

Question

我的脚本的目标是当用户向下滚动时，我的页面应该滚动到下一个 div。为此，脚本会区分用户是否向上和向下滚动。之后，当他滚动时，它应该删除我的第一个 div 的类 active 并添加到下一个。然后它滚动到带有 active 类的新 div。问题是它仅适用于第一个滚动，而不适用于下一个。

我的代码:

$(window).load(function() {
    var tempScrollTop, currentScrollTop = 0;
    var $current = $("#container > .active");
    var next = $('.active').next();
    var prev = $('.active').prev();

    $(window).scroll(function() {
        currentScrollTop = $(window).scrollTop();

        if (tempScrollTop < currentScrollTop) { //scrolling down 
            $current.removeClass('active').next().addClass('active'); 
            $.scrollTo(next, 1000);
        }
        else if (tempScrollTop > currentScrollTop ) { //scrolling up
            $current.removeClass('active').prev().addClass('active');
            $.scrollTo(prev, 1000);
        }

        tempScrollTop = currentScrollTop;
    }); 
});

有人可以帮我吗？

Answer 1

您需要将下一个和上一个变量移动到滚动函数中

$(window).load(function(){

var tempScrollTop, currentScrollTop = 0;



$(window).scroll(function(){

currentScrollTop = $(window).scrollTop();
//you need to assign the $current, next and prev here so they get the current elements (not the ones that were set at the beginning
var $current = $("#container > .active");    
var next = $('.active').next();
var prev = $('.active').prev();    


if (tempScrollTop < currentScrollTop )//scrolling down
{
$current.removeClass('active').next().addClass('active');
$.scrollTo(next, 1000);
}
else if (tempScrollTop > currentScrollTop )//scrolling up

{
$current.removeClass('active').prev().addClass('active');
$.scrollTo(prev, 1000);
}
tempScrollTop = currentScrollTop;
});
});

已更新我还将 $current var 添加到滚动函数中。