如何讓此固定導航欄停止閃爍？

我有一個固定的導航欄，在向下滾動頁面時淡出並在滾動頁面時再次出現，這一切都可以正常工作，但我注意到如果我以很短的移動速度快速完成此操作20次。它沒有時間去做，似乎存儲了計數，然後會繼續閃爍那麼多次。我怎樣才能阻止呢？如何讓此固定導航欄停止閃爍？

這裏是我的代碼：

<script type="text/javascript"> 
var previousScroll = 0, 
headerOrgOffset = $('#centre').height(); 

$('header').height($('#centre').height()); 

$(window).scroll(function() { 
var currentScroll = $(this).scrollTop(); 
if (currentScroll > headerOrgOffset) { 
    if (currentScroll > previousScroll) { 
     $('header').fadeOut(); 
    } else { 
     $('header').fadeIn(); 
    } 
} else { 
     $('header').fadeIn(); 
} 
previousScroll = currentScroll; 
}); 
</script> 

<style type="css/text"> 
header { 
width:100%; 
height:86px; 
background:#ffffff; 
top:0; 
left:0; 
right:0; 
position:fixed; 
z-index: 1000; 
display:block; 
border-bottom: solid 1px #eee; 
} 

#centre { 
width:960px; 
height:86px; 
margin-left:auto; 
margin-right:auto; 
background:#ffffff; 
} 
</style> 

<header> 
    <div id="centre">Nav</div> 
</header>

來源

2017-02-17 Ash

我似乎無法複製您的問題與上述代碼。您能否發佈[最小，完整和可驗證的示例]（http://stackoverflow.com/help/mcve）？一個代碼提琴，如JSFiddle或CodePen真的可以幫助:) –

這是一個被稱爲反跳的概念。基本上忽略在特定時間範圍內的任何重複行爲。在以下代碼中，doSomething方法僅在最後一次滾動事件後調用500ms。

function doSomething() { 
    // do some really cool stuff 
} 

var timer; 
$(window).scroll(function() { 
    clearTimeout(timer); 
    timer = setTimeout(doSomething, 500); 
});

來源

2017-02-17 01:51:11

嗨瑞安，謝謝你的回答。你是否也知道我可以如何防止導航在頁面開始時立即消失？所以當它達到像150像這樣消失？ – Ash

你需要自己去玩，因爲這與這個問題是分開的。隨意嘗試一下，如果您遇到問題，請創建JSfiddle並打開一個新問題。 –

如何讓此固定導航欄停止閃爍？

回答

相關問題