スティック要素そのタイプの次の要素が、私はこの良い説明を与えることに苦労しますが、私と一緒にクマよ

Question

を表示されるまで：

を、私はこの

ようstructedページを持っている場合

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

ユーザーが「第2章」の開始位置までスクロールし、その時点で「第2章」が上部に表示されるまで、「第1章」を絶対的に配置したいページの

必要に応じて、ラッパークラスとdivを追加できます。 JQueryを使用するソリューションは素晴らしいでしょう。

Answer 1

見出しの位置を変更するのではなく、ユーザーが過去にスクロールしたことを検出したときに常に画面の上部にある見出しを作成して見出しを複製することができます。作業のデモを参照してください：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

私が正しく理解していれば、Googleの画像ページングのようなものが欲しいですか？現在のページが上に表示され、次のページがスクロールして新しいページになるまで表示されます。

あなたがしたいのは、ユーザーがスクロールしているとき、H2要素の位置を確認するとき、それが親コンテナのスクロールトップより小さいときにそのテキストをその候補にする上部に絶対配置された要素。ループのネガティブブレークアウトにないH2をヒットし、テキストを絶対配置された要素に追加します。