Ndtyjky

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() {



  document.getElementById('nav-mobile').style.webkitTransition = 'opacity 1s';

  document.getElementById('nav-mobile').style.mozTransition = 'opacity 1s';



  var windowpos = $(window).scrollTop();



  if (windowpos > 50 || $("#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>