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来跟踪最后一个已知的滚动位置。用户滚动后，它会将滚动位置与上一个已知滚动位置进行比较，并根据该位置添加或删除您的类。我还删除了＆lt; =和＆gt; =因为如果滚动位置没有改变（不知何故），我不希望它做任何事情。

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);
    });
});

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

1 个答案: