title: Update Navbar When User Scrolls
body: <p>So I am trying to update the Navbar(.nav>li>a) when ever a user scrolls over the section.</p>
  
  <p>My issue that each Nav-Item must have its own color.</p>
  
  <p>I can get the Nav-items to scroll but i cannot get the css .custom_active to apply dynamically for each nav item when the user is scrolling over that section.</p>
  
  <p>This is what i have so far :</p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var selector1 = '#menu_item1';
  var selector2 = '#menu_item2';
  var selector3 = '#menu_item3';
  var selector3 = '#menu_item4';
  
  $(document).ready(function() {
    $(".nav li a").removeClass("active");
  });
  
  $('.nav li a').on('click', function() {
    var scrollAnchor = $(this).attr('data-scroll'),
      scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
    $('body,html').animate({
      scrollTop: scrollPoint
    }, 500);
    return false;
  })
  
  
  $(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll &gt;= 100) {
      $(selector1).addClass('custom_active1');
      $(selector2).addClass('custom_active2');
      $(selector3).addClass('custom_active3');
      $(selector4).addClass('custom_active4');
      $('.wrapper section').each(function(i) {
        if ($(this).position().top &lt;= windscroll - 20) {
          $('nav a.active').removeClass('active');
          $('nav a').eq(i).addClass('active');
        }
      });
  
    } else {
  
      $(selector1).removeClass('custom_active1');
      $(selector2).removeClass('custom_active2');
      $(selector3).removeClass('custom_active3');
      $(selector4).removeClass('custom_active4');
      $('nav a.active').removeClass('active');
      $('nav a:first').addClass('custom_active1');
    }
  
  }).scroll();
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
    background-image: url(https://wallpaperscraft.com/image/blurry_colorful_rainbow_16063_3840x2400.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    max-height: 3000px;
    letter-spacing: 2px !important;
  }
  
  @media only screen and (max-width: 1500px) {
    body {
      background-size: auto;
    }
  }
  
  @media only screen and (max-width: 770px) {
    .nav&gt;li {
      text-align: center;
    }
  }
  
  #background-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  .navbar {
    background: rgba(0, 0, 0, 0.73);
    border-radius: 0px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.43);
  }
  
  .navbar&gt;.container-fluid&gt;.navbar-header&gt;a {
    color: white !important;
  }
  
  .nav&gt;li&gt;a {
    color: white !important;
  }
  
  .custom-containers {
    width: 100%;
    background: rgba(26, 85, 0, 0.49);
    height: 600px;
    top: 100px;
    position: absolute;
    text-align: center;
    color: white;
    border: 1px white solid;
    box-shadow: 0 0 50px black;
    padding-top: 50px;
  }
  
  #section1 {
    text-shadow: 1px 1px 1px black;
  }
  
  #section2 {
    background: rgba(85, 0, 82, 0.49);
    top: 1000px;
  }
  
  #section3 {
    background: rgba(0, 0, 85, 0.49);
    top: 1900px;
  }
  
  #section4 {
    background: rgba(26, 85, 0, 0.49);
    top: 2800px !important;
    -moz-margin-bottom: 100px !important;
  }
  
  .custom_active1 {
    background: rgba(181, 255, 148, 0.3);
    transition: all 0.2s;
  }
  
  .custom_active2 {
    background: rgba(250, 144, 246, 0.3);
    transition: all 0.2s;
  }
  
  .custom_active3 {
    background: rgba(158, 158, 255, 0.3);
    transition: all 0.2s;
  }
  
  .custom_active4 {
    background: rgba(181, 255, 148, 0.3);
    transition: all 0.2s;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
  
  &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;                        
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#section1"&gt;Designs by Cornelius&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li id="menu_item1"&gt;&lt;a data-scroll="section1" href="#section1"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu_item2"&gt;&lt;a data-scroll="section2" href="#section2"&gt;My Skills&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu_item3"&gt;&lt;a data-scroll="section3" href="#section3"&gt;My Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu_item4"&gt;&lt;a data-scroll="section4" href="#section4"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;section class="container-fluid custom-containers" id="section1" data-anchor="section1"&gt;
    &lt;h1&gt;Hi There,&lt;/h1&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;h1&gt;My name is &lt;b&gt;Cornelius&lt;/b&gt;, I am :&lt;/h1&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;h1&gt;
      &lt;p class="typewrite" data-period="2000" data-type='[ "A Front End Dev.", "Creative.", "Inspired.", "Passionate about development.", "Human." ]'&gt;
        &lt;span class="wrap"&gt;&lt;/span&gt;
      &lt;/p&gt;
    &lt;/h1&gt;
    &lt;span class="scroll-text"&gt;
    Scroll
    &lt;br&gt;
    &lt;i class="fa fa-angle-double-down fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/span&gt;
  &lt;/section&gt;
  
  &lt;section class="container-fluid custom-containers" id="section2" data-anchor="section2"&gt;
    &lt;h1&gt;My Skills&lt;/h1&gt;
    &lt;span class="scroll-text"&gt;
    Scroll
    &lt;br&gt;
    &lt;i class="fa fa-angle-double-down fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/span&gt;
  &lt;/section&gt;
  
  &lt;section class="container-fluid custom-containers" id="section3" data-anchor="section3"&gt;
    &lt;h1&gt;My Gallery&lt;/h1&gt;
    &lt;span class="scroll-text"&gt;
    Scroll
    &lt;br&gt;
    &lt;i class="fa fa-angle-double-down fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/span&gt;
  &lt;/section&gt;
  
  &lt;section class="container-fluid custom-containers" id="section4" data-anchor="section4"&gt;
    &lt;h1&gt;Contact Me&lt;/h1&gt;
  &lt;/section&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>So each individual Nav-Item must update with the same background color as the section that is on the screen.</p>
  
  <p>When the user scrolls then the navbar must dynamically update to whatever ever section the user is on.</p>
  
  <p>im not sure if that makes sense, but go ahead and ask any qeustions to make life easier, please.</p>