Podświetl aktywne łącze podczas używania scrollto w oparciu o bieżący widok

Question

Mam stronę internetową, która jest jedną stroną, a użytkownik przechodzi do każdej sekcji za pomocą linków, które używają wtyczki scrollto jquery.

Mój problem: chcę wyświetlić aktywny link w menu głównym. Jeśli przejdziesz do formularza kontaktowego, podświetlone zostanie łącze do kontaktu. Teraz mogłem to zrobić w jquery, dodając klasę po kliknięciu. Jeśli tak się stanie, jeśli użytkownik ma ręcznie przewinąć do innej sekcji, łącze kontaktowe będzie nadal aktywne, co byłoby niepoprawne i wprowadzające w błąd.

Tak więc moje przemyślenia powinny w jakiś sposób sprawdzić, który identyfikator div jest obecnie w widoku. Naprawdę nie rozumiem, jak to zrobić. Jakieś pomysły?

Answer 1

To powinno działać, aby dodać ręcznego przewijania ręczne:

$(function(){ 
    var sections = {}, 
     _height = $(window).height(), 
     i  = 0; 

    // Grab positions of our sections 
    $('.section').each(function(){ 
     sections[this.name] = $(this).offset().top; 
    }); 

    $(document).scroll(function(){ 
     var pos = $(this).scrollTop(); 

     // Look in the sections object and see if any section is viewable on the screen. 
     // If two are viewable, the lower one will be the active one. 
     for(i in sections){ 
      if(sections[i] > pos && sections[i] < pos + _height){ 
       $('a').removeClass('active'); 
       $('#nav_' + i).addClass('active'); 
      } 
     } 
    }); 
}); 

Demo: http://jsfiddle.net/x3V6Y/