Toggle navbar color on window scroll bootstrap + jquery

user_8457255 0
Viewed 629

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';
  }  
});
bootstrap-4 css html jquery javascript
1 Answers

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>

user_26308170
Related