title: Jquery add and remove class on scroll
body: <p>I need to find position of element and when scroll reached to element and element displayed in screen, highlight icon.</p>
  <p>Script works but class adds very early, when block closer to bottom. I need add class when block closer to top.</p>
  <p>My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(window).scroll(function($) {
    var scrollDistance = jQuery(window).scrollTop();
    jQuery('.page-section').each(function(i) {
  if (jQuery(this).position().top &lt;= scrollDistance) {
    jQuery('h4 a').removeClass('active'); 
    jQuery('.navigation a').removeClass('active');
    jQuery('.navigation a').eq(i).addClass('active');
  
  }
    });
  }).scroll();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h4&gt;&lt;a href="home"&gt;Home&lt;/a&gt;&lt;/h4&gt;    
  &lt;ul class="navigation"&gt;
    &lt;li&gt;&lt;a href="#overview" class=""&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#employment" class=""&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#time" class="active"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#payroll" class=""&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#further-reading"&gt;5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class= "page-section" id="home"&gt;&lt;/div&gt;
  &lt;div class= "page-section" id="overview"&gt;&lt;/div&gt;
  &lt;div class= "page-section" id="employment"&gt;&lt;/div&gt;
  &lt;div class= "page-section" id="time"&gt;&lt;/div&gt;
  &lt;div class= "page-section" id="payroll"&gt;&lt;/div&gt;
  &lt;div class= "page-section" id="further-readin"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>