Pfthb

I am using bootstrap to create a navigation bar, I basically want to achieve two things

1. When I scroll down my page 20% ,the navbar should change its color and again
   if i went top it should be back to its original color.



2. 
   

   When the bootstrap's collapse is on i.e. when the collapsed div can be seen,
   I want my div to remain in its original color irrespective of the window
   scroll.

   
   
   

   <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';
 
);

You need to move $('#navbarResponsive') out of scroll because it will intialize only when window is scrolling.

I have changed few things here is the demo of it.

$(window).scroll(function() $("#navbarResponsive").hasClass("show")) 
 document.getElementById('nav-mobile').style.backgroundColor = '#1c223f';
 else 
 document.getElementById('nav-mobile').style.backgroundColor = '';
 
);

$('#navbarResponsive')
 .on('shown.bs.collapse', function() 
 document.getElementById('nav-mobile').style.backgroundColor = '#1c223f';
 ).on('hidden.bs.collapse', function() 
 var windowpos = $(window).scrollTop();
 if (windowpos > 50) 
 document.getElementById('nav-mobile').style.backgroundColor =
 '#1c223f';
 else 
 document.getElementById('nav-mobile').style.backgroundColor =
 '';
 
 );

body 
 height: 1000px

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVCT-lYaIPfWsXbMZpFleT5-m-lA4Qbs9YhG44nDGAw7XEYjqB" /></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>