Question

尝试在.removeClass时应用SlideUp转换。此脚本显示/隐藏页面上的导航菜单向上/向下滚动。我想在导航菜单隐藏时添加转换。请参阅此fiddle＆gt;

JS

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

我试过：

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

这不起作用。问题是如何在导航隐藏时添加slideUp效果？我想尝试This＆gt;

Answer 1

是的，您可以使用slideUp()＆amp; slideDown()功能如下：

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

        $(".nav").slideDown('fast',function(){
            $(".nav").addClass("darkHeader");
        });
    } else {
        $(".nav.darkHeader").slideUp('slow',function(){
            $(".nav").removeClass("darkHeader");
        });
    }
    lastScroll = scroll;
});

请参阅此处使用2个函数的示例：jsfiddle

在.removeClass上应用SlideUp过渡

1 个答案: