title: Jquery add and remove class on scroll position
body: <p>I have the following problem. I want to add a class .orange to list-item and remove it on scroll if scroll reaches a specific element.</p>
  
  <p><a href="https://i.stack.imgur.com/1Sp0d.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Sp0d.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;style&gt;
      .orange {
          background-color: orange;
      }
  &lt;/style&gt;
  
  &lt;ul class="navbar-custom clearfix"&gt;
      &lt;li&gt;
          &lt;a href="#first-section"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#second-section"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#third-section"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#fourth-section"&gt;&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;section id="first-section"&gt;&lt;/section&gt;
  &lt;section id="second-section"&gt;&lt;/section&gt;
  &lt;section id="third-section"&gt;&lt;/section&gt;
  &lt;section id="fourth-section"&gt;&lt;/section&gt;
  
  &lt;script type="text/javascript"&gt;
      var $sec = $("section"),
          handle = null;
      var $w = $(window).scroll(function () {
        clearTimeout(handle);
        handle = setTimeout(function () {
          var top = $w.scrollTop();
          // within the `setTimeout` context:
          var $f = $sec.filter(function () {
            return $(this).offset().top + $(this).height() &gt;= top;
          }).first();
          $items.removeClass('orange').eq($sec.index($f)).addClass('orange');
        }, 40);
      }).scroll();
  &lt;/script&gt;
  </code></pre>