JQuery add class on scroll

Question

Я использую этот код для добавления класса в прокрутку. Активный класс отлично работает, но расположение на странице при размещении этого класса неверно. Мы используем основной заголовок на нашем веб-сайте с фиксированной позицией, и когда этот заголовок становится липким, он находится ниже нашего основного заголовка и фиксируется положение. Активный класс должен быть размещен ранее на странице, потому что содержимое этого раздела уже началось, когда класс помещен.

HTML:

<div style="height:57px;"> 
    <div class="menu-header-product"> 
    <div class="product-anchor-links-wrapper"> 
    <nav class="product-page-nav"> 
     <ul class="menu-header-top-product"> 
      <li class="menu-item-header-product"><a href="#description" class="product-nav-link">Productbeschrijving</a></li> 
      <li class="menu-item-header-product"><a href="#additional" class="product-nav-link">Specificaties</a></li> 
      <li class="menu-item-header-product"><a href="#reviews" class="product-nav-link">Reviews</a></li> 
     </ul> 
    </nav> 
    </div> 
    </div> 
    </div> 

<div class="content"> 
<section id="description"> 
<div class="box-description"></div> 
</section> 

<section id="additional"> 
<div class="box-additional"></div> 
</section> 

<section id="reviews"> 
<div class="box-reviews"></div> 
</section> 
</div> 

Что не так с этим кодом:

<script> 
$(window).scroll(function(){ 
    var sticky = $('.menu-header-product'), 
     scroll = $(window).scrollTop(); 

    if (scroll >= 645) sticky.addClass('sticky'); 
    else sticky.removeClass('sticky'); 
}); 
$(window).scroll(function(){ 
    var sticky = $('.content'), 
     scroll = $(window).scrollTop(); 

    if (scroll >= 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 <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) { 
       $('nav ul li a').removeClass("active"); 
       currentLink.addClass("active"); 
      } 
      else{ 
       currentLink.removeClass("active"); 
      } 
     }); 
    } 
</script> 

Answer 1

Вы просто забыли о закрытии </section> теги в разметке:

<section id="description"> 
<div class="box-description"></div> 
<section id="additional"> 
<div class="box-additional"></div> 
<section id="reviews"> 
<div class="box-reviews"></div> 

должен быть

<section id="description"> 
<div class="box-description"></div> 
</section> 
<section id="additional"> 
<div class="box-additional"></div> 
</section> 
<section id="reviews"> 
<div class="box-reviews"></div> 
</section>