My goal is to create a navigation bar that is initially hidden when the page loads, but appears when you scroll down to the second section. I have managed to make it work, however, there is an issue when scrolling up and down within the home section - the nav bar keeps flickering instead of staying hidden.
Check out the Live Demo:
Here's the JavaScript code:
<script type="text/javascript">
jQuery(document).ready(function() {
var startY = jQuery('#home').position().top + jQuery('#home').outerHeight();
jQuery('#nav-container').html( jQuery('#nav').html());
jQuery(window).scroll(function () {
if(jQuery(this).scrollTop() > startY ){
jQuery('#nav-container').slideDown();
}else{
$('#nav-container').css({display: 'block'});
jQuery('#nav-container').slideUp();
}
});
});
</script>
And here's the CSS style for the navigation container:
#nav-container {
position: fixed;
height: 50px;
width: 100%;
min-width: 600px;
display: none;
}
I would appreciate any help or suggestions to fix this issue. Thank you in advance for your assistance.
By the way, this is my first time experimenting with JQuery and JS, so please be patient with me.
After making the necessary fixes, here is the updated version of the JavaScript code:
<script type="text/javascript">
$(document).ready(function() {
var startY = $('#home').position().top + $('#home').outerHeight();
var navc = $('#nav-container')
navc.html( $('#nav').html());
$(window).scroll(function () {
if($(this).scrollTop() > startY ){
navc.slideDown();
}else{
navc.slideUp();
}
});
});
</script>