Seeking to enhance my WordPress website with Bootstrap 4's navbar functionality. I aim to achieve a captivating effect where the top navbar remains transparent, gracefully fades out upon scrolling down, fades back in (with a background color) when scrolling up, and finally transitions to transparency before reaching the top.
While using the jQuery code from an example found here, I am unsure how to implement the 'removing the background color before reaching the top' feature.
The provided example code includes:
$(function () {
var lastScrollTop = 0;
var $navbar = $('.navbar');
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop) { // scroll down
// jQuery full version
$navbar.fadeOut()
// CSS3 animation
// $navbar.addClass("fade-out");
// $navbar.removeClass("fade-in");
// No effect required
// $navbar.hide();
} else { // scroll up
// jQuery full version
$navbar.fadeIn()
// CSS3 animation
// $navbar.addClass("fade-in");
// $navbar.removeClass("fade-out");
// No effect required
// $navbar.show();
}
lastScrollTop = st;
});
});
I came across a similar example where navbar and div were used to determine scroll height for the transition, but I prefer not to rely on a specific div id.
//jQuery code for collapsing navbar on scroll
var header_height = $('.navbar').height(),
intro_height = $('.intro-section').height(),
offset_val = intro_height + header_height;
$(window).scroll(function() {
var scroll_top = $(window).scrollTop();
if (scroll_top >= offset_val) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".navbar-fixed-top").removeClass("navbar-transparent");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".navbar-fixed-top").addClass("navbar-transparent");
}
});
Appreciate any insights or assistance on this matter.