防止在没有浏览器滚动的情况下添加 class

Question

此js仅在向上滚动浏览器页面时添加class。但问题是在将浏览器向上滚动到页面顶部后 .darkHeader class 未删除，这意味着我想在页面向上滚动到顶部后删除此 class。

JS

lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});

JSfiddle >>

如何在页面完全向上滚动到 page/head 之后删除 .darkHeader class？如何防止在浏览器不滚动的情况下添加 class？

Answer 1

您可以添加另一个条件来检查滚动是否在页面顶部，然后像这样删除 class：

    if(scroll === 0){
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }

防止在没有浏览器滚动的情况下添加 class

Prevent adding class without browser scroll

javascript

jquery

scroll

scrollbar