jQuery cambiar hash (identificador de fragmento) mientras se desplaza hacia abajo página

Question

Estoy construyendo un sitio web de un buscapersonas. P.ej. cada página (5 en total) está en una página grande con el menú principal fijo en la parte superior. Cuando hace clic en un enlace de menú, lo desliza hacia la etiqueta de anclaje de esas páginas y el elemento de menú cliqueado obtiene una clase de CSS "activa".

Lo que me gustaría hacer ahora es permitir al usuario desplazarse por sí mismo pero aún tener el elemento "activo" de menú y el hash de URL cambian a medida que lo hacen.

Así que mi pregunta básicamente es cómo sé cuando el usuario se ha desplazado a una página diferente para poder actualizar el menú y hash URL (identificador de fragmento).

Gracias

Answer 1

su posible pero hay un requisito a la página (para mi solución al trabajo):

su página tiene que ser separados en divs (o partes de lo que sea) con los identificadores únicos (espero que no utiliza el ancla <a> 's)

que puede utilizar código como este:

$(document).bind('scroll',function(e){ 
    $('section').each(function(){ 
     if (
      $(this).offset().top < window.pageYOffset + 10 
//begins before top 
     && $(this).offset().top + $(this).height() > window.pageYOffset + 10 
//but ends in visible area 
//+ 10 allows you to change hash before it hits the top border 
     ) { 
      window.location.hash = $(this).attr('id'); 
     } 
    }); 
}); 

con html como esto

<section id="home"> 
    Home 
</section> 
<section id="works"> 
    Works 
</section> 
<section id="about"> 
    About 
</section> 

Answer 2

Usted está buscando el controlador de .scroll() caso

Answer 3

con jQuery se puede utilizar el método scrollTop para encontrar la posición de desplazamiento y luego compararlo decir, la posición de los elementos de la página para hacer ejercicio dónde están en la página y actualizar en consecuencia.

Answer 4

Tengo el mismo problema de esto para el contenido de la sección de altura de corrección que cambiará Hash de acuerdo con el desplazamiento. De alguna manera este código no funciona en otro navegador aparte de Chrome. Y también manipular DOM en el rollo, entonces tiene que tomar mucho tiempo para ese evento para obtener proceso se refiere http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/ Aquí hay código de ejemplo de cómo puedo solucionar este

(function() { 
    // Find all top,bottom and Hash of each sections, 
    // Do this only if the section height remain the same always 
    // Move this into the step() if your section height does change. 
    // e.g. browser resize 
    // 
    var section = $.map($("section"), function (e) { 
     var $e = $(e); 
     var pos = $e.position(); 
     return { 
      top: pos.top, 
      bottom: pos.top + $e.height(), 
      hash: $e.attr('id') 
     }; 
    }); 

    //Checking scroll 
    var top = null; 
    var changed = false; 
    var currentHash = null; 

    $(window).scroll(function() { 
     var newTop = $(document).scrollTop(); 

     changed = newTop != top; 
     if (changed) { 
      top = newTop; 
     } 

    }); 

    // You wouldn't want to keep checking the scroll state as 
    // it affects the browser performance when it's accessing 
    // DOM and reduce your FPS (Frame per Seconds) for scrolling 
    // 
    function step() { 
     if (!changed) { 
      // Top did not change 
      return setTimeout(step, 200); 
     } 
     var count = section.length; 
     var p; 

     while (p = section[--count]) { 
      if (p.top >= top || p.bottom <= top) { 
       continue; 
      } 
      if (currentHash == p.hash) { 
       break; 
      } 
      var scrollTop = $(document).scrollTop(); 
      window.location.hash = currentHash = p.hash; 
      // prevent browser to scroll 
      $(document).scrollTop(scrollTop); 
     } 
     setTimeout(step, 200); 
    } 
    setTimeout(step, 200); 
})(); 

Demo