My fixed navigation bar fades out when scrolling down the page and reappears when scrolling up, which all works well. However, I have noticed that if I do this very quickly with short movements, around 20 times, it doesn't have enough time to complete the fade animation and seems to store the count, causing it to flash repeatedly for that amount of times. How can I prevent this from happening?
Below is the code I am using:
<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>