jquery - 当浏览器向下滚动时删除类，但在浏览器向上滚动时添加类

Question

我正在创建一个 1 页网站，我想在用户向下滚动时删除一个类，并在用户向上滚动时添加该类。

我已经做到了这一点，但它不正确，当用户从顶部向下滚动 50px 时，该类将被删除，并在用户从顶部向上滚动 50px 时添加。

我想要它，这样它们就可以几乎位于页面底部，如果向上滚动，类就在那里，如果它们向下滚动，那么它就会被删除

这是我到目前为止的查询

jQuery(document).ready(function($) {
    $(".test").addClass("mobile");
    $(window).scroll(function(){
        var scroll = $(window).scrollTop();
        if (scroll >= 50) {
        $(".test").removeClass("mobile");
        } else if (scroll <= 50) {
        $(".test").addClass("mobile");
        }
    });
});

Answer 1

所以这声明了一个全局变量lastScroll来跟踪最后一个已知的滚动位置。用户滚动后，它会将滚动位置与最后一个已知的滚动位置进行比较，并根据该位置添加或删除您的类。我还删除了 <= 和 >=，因为如果滚动位置不改变(以某种方式)，我不希望它执行任何操作。

var lastScroll = 0;

jQuery(document).ready(function($) {
    $(".test").addClass("mobile");

    $(window).scroll(function(){
        var scroll = $(window).scrollTop();
        if (scroll > lastScroll) {
            $(".test").removeClass("mobile");
        } else if (scroll < lastScroll) {
            $(".test").addClass("mobile");
        }
        lastScroll = scroll;
    });
});

根据下面的评论，添加以下内容:

var lastScroll = 0;

jQuery(document).ready(function($) {
    $(".test").addClass("mobile");

    $(window).scroll(function(){
        setTimeout(function() { //give them a second to finish scrolling before doing a check
            var scroll = $(window).scrollTop();
            if (scroll > lastScroll + 30) {
                $(".test").removeClass("mobile");
            } else if (scroll < lastScroll - 30) {
                $(".test").addClass("mobile");
            }
            lastScroll = scroll;
        }, 1000);
    });
});