kij elementem na górę strony aż do następnego elementu tego typu pojawia

Question

Mam twardy czas dając dobry opis tego, ale pokrywa się ze mną:

Jeśli mam stronę structed tak

<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> 

Chciałbym, aby "Rozdział 1" znajdował się w absolutnej pozycji lub cokolwiek na górze strony, dopóki użytkownik nie przewinie się do miejsca, w którym zaczyna się "Rozdział 2", w którym to momencie teraz "Rozdział 2" jest wyświetlany u góry strony strony.

Możemy dodać klasy opakowania i elementy div, jeśli to konieczne. Rozwiązania wykorzystujące JQuery byłyby świetne.

Answer 1

Zamiast zmieniać pozycję nagłówków, możesz utworzyć element div, który zawsze znajduje się u góry ekranu i klonować nagłówki, gdy wykryje, że użytkownik przewinął wcześniej. Zobacz demo robocza: 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

Jeśli dobrze rozumiem, chcesz mieć coś podobnego do usługi stronicowania serwisu Google, prawda? Gdzie wyświetla aktualną stronę, na której się znajdujesz, aż do następnej strony przewijającej się obok, a następnie staje się nową stroną.

To, co chcesz zrobić, gdy użytkownik przewija, sprawdź, czy położenie elementów H2, jeśli jest mniejsze niż przewijak kontenera rodzica, spraw, aby jego tekst był kandydatem absolutnie pozycjonowany element na górze. Gdy uderzysz H2, który nie jest ujemny, wyjmij pętlę i dodaj tekst do absolutnie pozycjonowanego elementu.