Resalte el vínculo activo al usar scrollto basado en la vista actual

Question

Tengo un sitio web que es una página y el usuario navega a cada sección usando enlaces que usan el plugin scrollto jquery.

Mi problema es: Quiero mostrar el enlace activo en el menú principal. Por lo tanto, si se desplaza al formulario de contacto, se resalta el enlace de contacto. Ahora podría hacer esto en jquery agregando la clase después de hacer clic. Si se hace así si un usuario fuera a desplazarse manualmente a otra sección, el enlace de contacto seguiría activo, lo cual sería incorrecto y engañoso.

Así que mi pensamiento sería averiguar de alguna manera qué ID div está actualmente a la vista. Aunque no entiendo cómo hacerlo. ¿Algunas ideas?

Answer 1

Esto debería funcionar para que usted agregue la anulación manual de desplazamiento:

$(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'); 
      } 
     } 
    }); 
}); 

Demostración: http://jsfiddle.net/x3V6Y/