Using Bootstrap to design a navigation bar, I have two main goals:
I want the navbar to change color when the page is scrolled down by 20%, and then revert back to its original color when scrolling back to the top.
When the collapse feature is active in Bootstrap i.e. when the collapsed div is visible, I need the navbar to maintain its original color regardless of window scroll position.
<div class="navbar-collapse nav-mobile-collapse collapse show" id="navbarResponsive" style="">
HTML
<nav class="navbar-expand-lg navbar-dark fixed-top d-block d-lg-none">
<div id="nav-mobile" class="d-flex flex-row nav-flex-row">
<div class="p-3 mr-auto"><img class="img img-fluid"
src="img/png/logo.png" /></div>
<div class="p-3">
<span class="navbar-toggler navbar-toggler-right" style="background-
color:transparent;color:white" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-
expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars fa-2x" aria-hidden="false" style="color:white">
</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse nav-mobile-collapse"
id="navbarResponsive">
<div id="top-menu" class="navbar-container collapsebar-main">
<div style="flex:1" class="">
<a class="active js-scroll-trigger " href="#about">About</a>
</div>
<div style="flex:1">
<a class="js-scroll-trigger" href="#product">Products</a>
</div>
<div style="flex:1">
<a class="js-scroll-trigger" href="#partners">Partners</a>
</div>
<div style="flex:1" class="testimonial-nav">
<a class="js-scroll-trigger" href="#testimonial">Testimonials</a>
</div>
</div>
</div>
</nav>
JAVASCRIPT
$(window).scroll(function(){
document.getElementById('nav-mobile').style.webkitTransition = 'opacity
1s';
document.getElementById('nav-mobile').style.mozTransition = 'opacity 1s';
var windowpos = $(window).scrollTop();
$('#navbarResponsive')
.on('shown.bs.collapse', function() {
document.getElementById('nav-mobile').style.backgroundColor = '#1c223f';
});
.on('hidden.bs.collapse', function() {
if (windowpos > 50) {
document.getElementById('nav-mobile').style.backgroundColor =
'#1c223f';
}
else {
document.getElementById('nav-mobile').style.backgroundColor =
'TRANSPARENT';
}
});
if (windowpos > 50) {
document.getElementById('nav-mobile').style.backgroundColor = '#1c223f';
}
});