elemento de palo a la parte superior de la página hasta el próximo elemento de ese tipo aparece

Question

Estoy teniendo un tiempo difícil dar una buena descripción de esto, pero tengan paciencia conmigo:

Si tengo una página structed como esto

<h2>Chapter 1</h2> 
<p>Lots of text that has mutiple screen worths of content</p> 
<h2>Chapter 2</h2> 
<p>Lots of text...</p> 

Me gustaría tener el "Capítulo 1" absolutamente posicionado o lo que sea en la parte superior de la página hasta que el usuario se desplace al "Capítulo 2", momento en el que se muestra "Capítulo 2" en la parte superior de la página.

Podemos agregar clases y divisiones de contenedor si es necesario. Las soluciones que usan JQuery serían geniales.

Answer 1

En lugar de cambiar el posicionamiento de sus Encabezados, puede crear un divisor que siempre esté en la parte superior de la pantalla y clonar los encabezados en él a medida que detecta que el usuario se ha desplazado. Vea una demostración de trabajo: http://jsfiddle.net/8sANt/

JS:

$(document).scroll(function() { 
    var sticky = $('#sticky'), h2 = $('h2:first'); 

    if (!sticky.length) 
     sticky = $('<div id="sticky">').appendTo('body'); 

    $('h2').each(function() { 
     if ($(this).parents('#sticky').length) return; // Ignore cloned headings 
     if ($(this).offset().top > $(window).scrollTop()) 
      return false; // Exit loop 
     h2 = $(this); 
    }); 

    sticky.empty().append(h2.clone()); 
}); 

CSS:

#sticky { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: white; 
} 

Answer 2

Si entiendo correctamente, quiere algo similar a la búsqueda de imágenes de Google, ¿verdad? Donde muestra la página actual en la que se encuentra en la parte superior hasta que la siguiente página se desplaza y luego se convierte en la nueva página.

Lo que quiere hacer es cuando el usuario está desplazándose, verifique la posición de los elementos H2, si es menor que el scrolltop de su contenedor primario, haga que su texto sea el candidato para ser el que está en el elemento absolutamente posicionado en la parte superior. Una vez que golpea un H2 que no está en el salto negativo del bucle y agrega el texto al elemento absolutamente posicionado.