Użycie jQuery do wyszukania bieżącego widocznego elementu i aktualizacji nawigacji

Question

Pierwszy użytkownik tutaj. Zwykle jestem w stanie znaleźć odpowiedzi na pytania, ale mam trudny czas wymyślić ten jeden.

Cel:

mam pojedynczy układ strony z bocznym pasku nawigacji, które po kliknięciu będzie przewiń do elementu na stronie. Jeśli jednak użytkownik przewinie stronę w dół do określonego elementu, chcę, aby odpowiedni link w nawigacji stał się .active. Łącze nawigacyjne i odpowiedni element mają tę samą wartość za pośrednictwem element#id i a[name].

podobne do:NikeBetterWorld.com

HTML poniższym przykładzie:

<nav> 
    <a name="value">Link</a> 
</nav> 

<section id="value"> 
    content goes here 
</section> 

Oczywiście, nie ma więcej części, linki, elementy itp Ale to jest sedno tego. Kiedy użytkownik przewinie do section#value, klasa a[value] zyska klasę aktywną.

Znalazłem tu odpowiedź, która nieco pomogła, ale nadal mam pewne problemy. See this link for more information.

Aktualny JavaScript/jQuery:

$(document).scroll(function() { 
    var cutoff = $(window).scrollTop(); 
    var cutoffRange = cutoff + 200; 

    // Find current section and highlight nav menu 
    var curSec = $.find('.current'); 
    var curID = $(curSec).attr('id'); 
    var curNav = $.find('a[name='+curID+']'); 
    $(curNav).addClass('active'); 

    $('.section').each(function(){ 
     if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) { 
      $('.section').removeClass('current') 
      $(this).addClass('current'); 
      return false; // stops the iteration after the first one on screen 
     } 
    }); 
}); 

Problem:

Chociaż powyższy kod działa w stopniu używam w jeden wielki problem. Mam problem z uzyskaniem całego elementu, który pozostanie .current. Jeśli górna część elementu zniknie z okna, straci klasę. Naprawiłem to przez dodanie zakresu dla nowych elementów, ale teraz, gdy użytkownik przewija w górę, poprzedni element nie zyskuje klasy .current, dopóki góra elementu nie osiągnie góry okna. Wolałbym, aby dominująca część okna, gdy była widoczna, zyskała klasę .current.

Każda pomoc, pomysły i sugestie będą mile widziane.

Z góry dziękuję!

Answer 1

Wygląda na to, że chcesz sprawdzić dolną krawędź sekcji, a nie jej górną. Wypróbuj to i usuń cały zakres razem:

if($(this).offset().top + $(this).height() > cutoff){ 

EDYCJA: Utworzono skrzypce. Myślę, że to właśnie opisujesz.

http://jsfiddle.net/pdzTW/

Answer 2

yeeeahhh! dostałem rozwiązanie!

prostu zmienić:

if ($(window).scrollTop() >= $(section).offset().top) { 

do

if ($(window).scrollTop() + 80 >= $(section).offset().top) { 

Answer 3

Zawsze używam jQuerys funkcję "filtra", aby powrócić do bieżącej sekcji.

$currSection = $('section').filter(function() { 
    var $this = $(this); 
    var offset = $this.offset().top; 
    var view = winHeight/2; 

    return scrollTop >= offset - view && offset + ($this.outerHeight() - view) >= scrollTop; 
}); 

owinąć go w przewijania słuchacza jak:

$(window).on('scroll', function() { 
    // here we go ... 
}); 

to wszystko.