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

Question

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

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 >>

页面完全向上滚动到页面/头部顶部后如何删除 .darkHeader 类？如何防止在没有浏览器滚动的情况下添加类？

Answer 1

您可以添加另一个条件来检查滚动是否位于页面顶部，并删除该类，如下所示:

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