I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code.
HTML:
<div id="hero">
<div class="welcome">
<img src="<?php echo get_template_directory_uri(); ?>/library/images/logo.png" alt="Logo"/>
</div>
<a href="http://localhost/elephant/#inner-header"><img class="arrow" src="<?php echo get_template_directory_uri(); ?>/library/images/arrow.png" alt="Weiter"/></a>
</div>
<nav class="nav"> (...) </nav>
CSS:
#hero {
background-image:url(../images/hero.jpg);
background-size:cover;
position:relative;
height:100vh;
}
JavaScript:
$(function () {
/* $(".navbar-fixed-top").css({"top":$("#hero").height()});
$(window).resize(function (e) {
$(".navbar-fixed-top").css({"top":$("#hero").height()});
}); */
$(document).on( 'scroll', function(){
console.log('scroll top : ' + $(window).scrollTop());
if($(window).scrollTop()>=$("#hero").height())
{
$(".nav").addClass("navbar-fixed-top");
}
if($(window).scrollTop()<$("#hero").height())
{
$(".nav").removeClass("navbar-fixed-top");
}
});
});
Do you see any mistakes or areas for improvement in my code?