¿Puede jQuery determinar qué divs se encuentran actualmente en la vista del navegador del usuario?

Question

¿Es posible determinar qué div se encuentra actualmente en la vista del navegador y luego desencadenar un evento cuando eso ocurra? Básicamente, tengo un sitio web que tiene de 5 a 6 secciones, todas en una página, y deseo activar eventos según la sección que esté actualmente a la vista en el navegador. Sé que podemos vincular directamente a las posiciones de una página usando la etiqueta # en hrefs, pero ¿es posible determinar cuál está actualmente en la vista principal en el navegador?

Answer 1

Sí, puedes hacer eso. La idea básica detrás de esto es observar el desplazamiento y determinar cuál de sus sections está enfocado por el usuario. Una buena respuesta para esto es por lo general de la sección, que está al lado de la parte superior de la ventana gráfica:

$(document).scroll(function() { 
    var $this = $(this), 
     scrollTop = $this.scrollTop(), 
     // find the section next to the current scroll top 
     sections = $(this).find('section'), 
     topSection = null, 
     minDist = Infinity; 

    sections.each(function() { 
    // calculate top and bottom offset of the section 
    var top = $(this).offset().top, 
     bottom = top + $(this).innerHeight(), 
     // only use the minimum distance to the scroll top 
     relativeDistance = Math.min(
      Math.abs(top - scrollTop), 
      Math.abs(bottom - scrollTop) 
     ); 
    // in case the distance is smaller than 
    // the previous one's replace it 
    if (relativeDistance < minDist) { 
     minDist = relativeDistance; 
     topSection = this; 
    } 
    }); 

    // flip the 'top' class from current to now next one 
    $('section.top').removeClass('top'); 
    $(topSection).addClass('top');  
}); 

se puede ver una muy buen ejemplo de esto en la Play Webframework's Homepage

Si eso no es todo lo desea, puede observar el pleno offset o position de cualquier elemento y compararlo con la ventana gráfica actual usando $(window).innerWidth() o $(window).innerHeight()

ACTUALIZACIÓN añadido un jsbin para verlo en acción. Disfrute;)