Currently, I am in the process of revamping our company's WordPress website using the Divi Builder. For the past couple of days, I have been scouring the internet trying to find a solution that would allow the navigation bar to change CSS classes as the user scrolls.
Although I came across plenty of information on this topic from various sources, including Stack Overflow, I haven't been able to locate a solution tailored specifically for the Divi Builder.
I attempted to play around with the provided HTML, CSS, and JavaScript from resources like this link without much success:
http://codepen.io/taylorleejones/pen/KJsvz
HTML:
<nav class="nav">
<a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>
CSS:
.nav {
background-color:transparent;
color:#fff;
transition: all 0.25s ease;
position:fixed;
top:0;
width:100%;
background-color:#ccc;
padding:1em 0;
}
.nav.past-main {
background-color:#fff;
color:#444;
}
#main {
height:500px;
background-color:red;
}
#below-main {
height:1000px;
background-color:#eee;
}
Javascript:
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.nav').addClass('past-main');
} else {
$('.nav').removeClass('past-main');
}
});
For reference, you can check out how the end result should look like here:
I aim to achieve a similar effect with our navigation bar - being transparent at the top and turning white when scrolling down or hitting a specific point.
My main challenge lies in figuring out where to incorporate HTML in the Divi theme.
Thank you in advance for any assistance and guidance provided.