向下滚动时淡出固定导航栏，当返回页面顶部时淡入

Question

我在浏览器窗口的顶部有一个固定的导航，我希望它在我向下滚动时淡出，当我向后滚动到顶部时淡入。

$(function(){

var didScroll = false;
var topbar = $('.topbar');
var $window = $(window);

function fadeOutScroll(){
    if(didScroll){
        if($window.scrollTop()>40){
            topbar.animate({'opacity':'0.4'},'slow');   
        }else{ 
            topbar.animate({'opacity':'1'},'100');  
        }           
        didScroll = false;
    }       
}

$window.scroll(function(){
    didScroll = true;
});

window.setInterval(fadeOutScroll,50);

});

当我向下滚动时它消失了，但是当我回到顶部时它不会每次都淡入淡出。它很奇怪。

Answer 1

试试这个。我希望它没有经过测试

$(function(){

var didScroll = false;
var scrollUp = false;
var topbar = $('.topbar');
var $window = $(window);

function fadeOutScroll(){
    if(didScroll){
        topbar.animate({'opacity':(scrollUp?'1':'0.4')},'100');  
        didScroll = false;
    }       
}

$window.scroll(function(){
    didScroll = true;
    scrollUp = ($window.scrollTop() < 40);
});

window.setInterval(fadeOutScroll,50);

});