I'm currently using some jquery to create a fading effect on my Bootstrap 4 navbar when scrolling past a certain point. However, I've encountered a couple of issues. The navbar doesn't appear when reloading the page after already scrolled down, and when scrolling back up, the transition is abrupt rather than a smooth fade out. How can I address these problems? Would it be more effective to solely rely on jquery instead of utilizing a CSS class for this functionality? If so, how could that be implemented? Thank you!
JavaScript:
$(window).scroll(function(e) {
if($(window).width() >= 768){
var scroll = $(window).scrollTop();
if (scroll >= 300) {
$('.navbar-home').addClass("navbar-hide");
} else {
$('.navbar-home').removeClass("navbar-hide");
}
}
});
CSS:
.navbar-home {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
.navbar-hide {
opacity: 1;
visibility: visible;
}