I'm working on a project where I want the navigation bar to only appear after scrolling a certain distance down the page. However, I've noticed that when I refresh the browser, the navigation bar appears immediately and then disappears once I start scrolling. After that initial glitch, everything works as intended.
Is there a way to make sure the navigation bar stays hidden when the page is refreshed?
Below is the JavaScript code I am using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(window).scroll(function(){
if( $(this).scrollTop() > 4000){
$('#navigation').fadeIn( "slow", "linear" )
} else {
$('#navigation').fadeOut( "slow", "linear" )
}
})
})
</script>
And here is the CSS code for styling the navigation bar:
nav ul {
position:fixed;
list-style: none;
width: 1100px;
height: 40px;
margin: 30px 222px auto;
padding: 20px 20px 20px 20px;
background-color: #798c39;
text-align: center;
}