How to change the color of a vertical navbar on scroll in bootstrap4?

Question

I am new to the Bootstrap framework and I would like to change the color of my navbar when scrolling on the different sections. When the background color of the section is white, the background color of the navbar should change to a red color, but my javascript isn' t working...

Could you please help me? I was unable to find a solution to my problem. Here's my codepen

$(document).ready(function() {
  var scroll_start = 0;
  var startchange = $('#part1');
  var offset = startchange.offset();
  $(document).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > offset.top) {
      $('.navbar-fixed-left').css('background-color', '#f9476c !important;');
    } else {
      $('.navbar-fixed-left').css('background-color', 'rgba(255,255,255,0.6)');
    }
  });
});

#part1 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#part2 {
  width: 100%;
  height: 100vh;
  background-color: #e9b8ac;
}

#part3 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#part4 {
  width: 100%;
  height: 100vh;
  background-color: #e9b8ac;
}

#spy {
  position: fixed;
  z-index: 5;
  height: 100vh;
}

.op {
  background-color: rgba(255, 255, 255, 0.6);
}

.op :hover {
  background-color: rgba(255, 255, 255, 1);
}

.navbar-fixed-left .nav-link {
  color: black;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div class="d-flex align-items-xl-center" id="spy">
    <nav class="navbar navbar-fixed-left">
      <ul class="navbar-nav">
        <li class="nav-item op"><a class="nav-link" href="#part1">Home</a></li>
        <li class="nav-item op"><a class="nav-link" href="#part2">About</a> </li>
        <li class="nav-item op"><a class="nav-link" href="#part3">Price</a> </li>
        <li class="nav-item op"><a class="nav-link" href="#part4">Contact</a> </li>
      </ul>
    </nav>
  </div>
  <section id="part1">
  </section>
  <section id="part2">
  </section>
  <section id="part3">
  </section>
  <section id="part4">
  </section>
</body>

</html>

Please [add relevant code directly to your question](https://stackoverflow.com/help/how-to-ask). You never know if CodePen will shut down, in which case future readers won't be able to understand the context of this question and the answer will be less useful. — JDB, Mar 01 '19 at 15:01
Eveything related to `change something when I am somewhere on the page` is the reason of the existence of the Vue.js framework. — robinvrd, Mar 01 '19 at 15:10
@JamesWhiteley you have to be very careful with making edits like these. Considering that CodePen uses MIT licensing and Stack Overflow uses cc-by-sa 3.0, there are some differences. Only the OP should be allowed to relicense his code on Stack Overflow. — g00glen00b, Mar 01 '19 at 15:45
@g00glen00b I didn't know about the different licences, fair enough. I assumed that because the author names are the same (at least I thought they were at a glance), it wouldn't matter. I'll be more cautious in the future. — James Whiteley, Mar 01 '19 at 15:48

score 0 · Answer 1 · answered Mar 01 '19 at 18:27

Your javascript code as-is looks quite convuluted, and could be simplified to a toggleClass() if you added a bit of css. Start by adding a class with a background color for the navbar-nav (I set this to red in my code as the home has a white background), and also add an additional class with the alternate bg color.

I would recommend defining your variables in jquery as jquery variables (with the dollar sign before them) - read more in this other SO question

I added some text to the sections so that you would get the effect on click.

Hope this helps

$(document).ready(function() {
  var scroll_start = 0;
  var $startchange = $('#part1');
  var $offset = $startchange.scrollTop();
  $(document).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > $offset) {
      $('.navbar-nav').toggleClass('altcolor');
    }
  });
});

#part1 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#part2 {
  width: 100%;
  height: 100vh;
  background-color: #e9b8ac;
}

#part3 {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#part4 {
  width: 100%;
  height: 100vh;
  background-color: #e9b8ac;
}

#spy {
  position: fixed;
  z-index: 5;
  height: 100vh;
}

.op {
  background-color: rgba(255, 255, 255, 0.6);
}

.op :hover {
  background-color: rgba(255, 255, 255, 1);
}

.navbar-nav {
  list-style-type: none;
  padding-left: 20px;
  background-color: #f9476c;
}

.navbar-nav.altcolor {
  background-color: rgba(255, 255, 255, 0.6);
}

.navbar-fixed-left .nav-link {
  color: black;
  text-decoration: none;
  padding: 0px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>

<body>
  <div class="d-flex align-items-xl-center" id="spy">
    <nav class="navbar navbar-fixed-left">
      <ul class="navbar-nav">
        <li class="nav-item op"><a class="nav-link" href="#part1">Home</a></li>
        <li class="nav-item op"><a class="nav-link" href="#part2">About</a> </li>
        <li class="nav-item op"><a class="nav-link" href="#part3">Price</a> </li>
        <li class="nav-item op"><a class="nav-link" href="#part4">Contact</a> </li>
      </ul>
    </nav>
  </div>
  <section id="part1">

  </section>
  <section id="part2">
    <p>
      About
    </p>
  </section>
  <section id="part3">
    <p>
      Price
    </p>
  </section>
  <section id="part4">
    <h2>
      Contact
    </h2>
  </section>
</body>

</html>

p.s. bootstrap isn't in the snippet (only jquery) but you can add it yourself! — Rachel Gallen, Mar 01 '19 at 18:30

How to change the color of a vertical navbar on scroll in bootstrap4?

1 Answers1