javascript - 仅在浏览器上添加类向上滚动

Question

有没有办法仅当有人向上滚动浏览器页面时才向元素添加类？

问题Filide>>

JS

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

    if (scroll <= 100) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
});

问题是这个js在向下滚动页面时添加类。但我想在向上滚动浏览器时添加类，然后在向下滚动时添加类将删除。
参见示例demo>>

Answer 1

如果您想知道用户是否向上或向下滚动，您需要跟踪最后的滚动位置。然后检查新的滚动位置是否大于或小于该位置。然后您可以相应地设置类

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

JSFiddle