Make Bootstrap4 Navigation bar change colour when scroll on different div of the website

user_15003379 0
Viewed 66

I am working on a website my personal portfolio website with bootstrap4 and I had nice idea in my mind that is changing navigation bar color on different div of my website .I know we have use JQuery's offset and scrollTop functions and I tried but it was not working properly. I was wondering if someone could point me in the right direction how to work it out.

Here is the website code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<header id="change">
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">about</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Contact</a>
      </li>    
    </ul>
  </div>  
</nav>
</header>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;heigth;height: 100vh;width:100%;">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>


<script>

var top1 = $('#section1').offset().top;
var top2 = $('#section2').offset().top;
var top3 = $('#section3').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('#change').css('background-color', '#f00');
  } else if (scrollPos >= top2 && scrollPos < top3) {
    $('#change').css('background-color', '#0f0');
  } else if (scrollPos >= top3) {
    $('#change').css('background-color', '#00f');
  }
});

</script>

</body>
</html>

Thanks in advance for help.

bootstrap-4 css html jquery javascript
2 Answers

The Background-color is set by the class "bg-dark" in the navbar. So i would do it with removing / adding classes for background-color directly on the navbar. For the example i created a few bg-color classes and gave the navbar an id. There might be way cleaner solutions but i just want to give you an example here.

.bg-purple {
  background-color: purple;
}

.bg-cyan {
  background-color: cyan;
}

.bg-orange {
  background-color: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<header id="change">
<nav id="navbar-change" class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">about</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Contact</a>
      </li>    
    </ul>
  </div>  
</nav>
</header>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;heigth;height: 100vh;width:100%;">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>


<script>

var top1 = $('#section1').offset().top;
var top2 = $('#section2').offset().top;
var top3 = $('#section3').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('#navbar-change').removeClass('bg-dark');
    $('#navbar-change').removeClass('bg-cyan');
    $('#navbar-change').removeClass('bg-orange');
    $('#navbar-change').addClass('bg-purple');
  } else if (scrollPos >= top2 && scrollPos < top3) {
     $('#navbar-change').removeClass('bg-dark');
     $('#navbar-change').removeClass('bg-purple');
     $('#navbar-change').removeClass('bg-orange');
     $('#navbar-change').addClass('bg-cyan');
  } else if (scrollPos >= top3) {
     $('#navbar-change').removeClass('bg-dark');
     $('#navbar-change').removeClass('bg-purple');
     $('#navbar-change').removeClass('bg-cyan');
     $('#navbar-change').addClass('bg-orange');
  }
});

</script>

</body>
</html>

user_130196380

You need to add background color in .navbar because background-color set in the bg-dark class with !important. So overwrite !important property you need to used cssText as the property name and whatever you want added to the css as its value.

var top1 = $('#section1').offset().top;
var top2 = $('#section2').offset().top;
var top3 = $('#section3').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('#change .navbar').css("cssText", 'background:#f00!important');
  } else if (scrollPos >= top2 && scrollPos < top3) {
    $('#change .navbar').css("cssText", 'background:#0f0!important');
  } else if (scrollPos >= top3) {
    $('#change .navbar').css("cssText", 'background:#00f!important');
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<header id="change">
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">about</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Contact</a>
      </li>    
    </ul>
  </div>  
</nav>
</header>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;height: 100vh;width:100%;">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;heigth;height: 100vh;width:100%;">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

user_63641900
Related