title: JQuery add class on scroll height header
body: <p>I use this code to add a class on scroll. The active class works great, but the location on the page when the class is placed is not correct. We use a main header on our website with position fixed and when this header becomes sticky it is placed below our main header also fixed. The active class needs to be placed earlier on the page when scroll, because the content of the section already started, when the class is placed. </p>
  
  <p>And for some reason the code conflicts with another script on the same page, how can I fix that problem? That both scripts with beside each other.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/0knrcv3z/1/" rel="nofollow">http://jsfiddle.net/0knrcv3z/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="height:57px;"&gt;
    &lt;div class="menu-header-product"&gt;
    &lt;div class="product-anchor-links-wrapper"&gt;
    &lt;nav class="product-page-nav"&gt;
     &lt;ul class="menu-header-top-product"&gt;
      &lt;li class="menu-item-header-product"&gt;&lt;a href="#description" class="product-nav-link"&gt;Productbeschrijving&lt;/a&gt;&lt;/li&gt;
      &lt;li class="menu-item-header-product"&gt;&lt;a href="#additional" class="product-nav-link"&gt;Specificaties&lt;/a&gt;&lt;/li&gt;
      &lt;li class="menu-item-header-product"&gt;&lt;a href="#reviews" class="product-nav-link"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/nav&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="content"&gt;  
  &lt;section id="description"&gt;
  &lt;div class="box-description"&gt;&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="additional"&gt;
  &lt;div class="box-additional"&gt;&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section id="reviews"&gt;
  &lt;div class="box-reviews"&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What do I need to change in this code?</p>
  
  <pre><code>&lt;script&gt;
  $(window).scroll(function(){
    var sticky = $('.menu-header-product'),
        scroll = $(window).scrollTop();
  
    if (scroll &gt;= 645) sticky.addClass('sticky');
    else sticky.removeClass('sticky');
  });
  $(window).scroll(function(){
    var sticky = $('.content'),
        scroll = $(window).scrollTop();
  
    if (scroll &gt;= 645) sticky.addClass('sticky');
    else sticky.removeClass('sticky');
  });
      $(document).ready(function () {
          $(document).on("scroll", onScroll);
  
          $('a[href^="#"]').on('click', function (e) {
              e.preventDefault();
              $(document).off("scroll");
  
              $('a').each(function () {
                  $(this).removeClass('active');
              })
              $(this).addClass('active');
  
              var target = this.hash;
              $target = $(target);
              $('html, body').stop().animate({
              'scrollTop': $target.offset().top-130 /**just subtract the height of the fixed html part */
               }, 500, 'swing', function () {
                  window.location.hash = target;
                  $(document).on("scroll", onScroll);
              });
          });
      });
  
  function onScroll(event){
          var scrollPosition = $(document).scrollTop();
          $('nav a').each(function () {
              var currentLink = $(this);
              var refElement = $(currentLink.attr("href"));
              if (refElement.position().top &lt;= scrollPosition &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPosition) {
                  $('nav ul li a').removeClass("active");
                  currentLink.addClass("active");
              }
              else{
                  currentLink.removeClass("active");
              }
          });
      }
  &lt;/script&gt;
  </code></pre>