Resalte el enlace activo cuando use scrollto basado en la vista actual

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

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

Por lo tanto, mi opinión sería determinar de alguna manera qué ID de div se encuentra actualmente a la vista. Aunque realmente no entiendo cómo hacer eso. ¿Algunas ideas?

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

$(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/