Scroll Offset Ändern Menüpunkt Klasse

Question

Ich habe eine Seite in Magento mit allen Kategorien und Produkten aufgelistet. Oben habe ich ein Menü mit den Kategorien und die Elemente, die Sie scrollen, müssen eine Klasse bekommen, damit ich die Farbe ändern kann.

Ich habe dieses Skript im Moment:

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('ul.nf-category-menu li a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('ul.nf-category-menu li a').removeClass("active"); 
      currLink.addClass("active"); 
     } 
     else{ 
      currLink.removeClass("active"); 
     } 
    }); 
} 

Aber die Klasse von div ändert sich bald div, kann ich einige Offset geben, so wird die Klasse später hinzugefügt werden?

Update:

Es ist nicht den „aktiven“ Klassenwechsel zu schnell, wenn te Titel 150px weg von der Spitze, würde Ich mag die Klasse um 80px von oben zu wechseln.

Grüße,

Answer 1

ich es schon fest, war es ganz einfach nach ein paar Dinge zu versuchen. Dies ist, wie es gemacht wurde.

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('ul.nf-category-menu li a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top+243 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('ul.nf-category-menu li a').removeClass("active"); 
      currLink.addClass("active"); 
     } 
     else{ 
      currLink.removeClass("active"); 
     } 
    }); 
} 

if (refElement.position() nach oben hatte geändert werden: if (refElement.position() oben + 243, wo 243 ist die Anzahl der Pixel des Offset.

.