Jquery add and remove class on scroll position
<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>