最近、多くのサイトが新しいタイプのスクロール効果を実装していることに気付きました。一例を次に示します。
最初にスクロールを開始すると、コンテンツがその上をスクロールしている間、最初のセクションがそのまま残ります (z-index は 1?)。また、フラグメントを使用し、ユーザーがスクロールした領域に応じてナビゲーション バーを動的に強調表示します。
いくつかのサイトが同様の手法を使用しているのを見てきました。1つ（リンクが見つかりません）は、背景を動的に変更します。
これらのタイプのサイトで使用される一般的な手法はありますか?
1つの方法は、CSSとJavaScriptを組み合わせることです（jQuery）
CSS：
position:fixedトップパネル用。
jQueryオフセットを使用してコンテナの位置を検出し、CSSクラスを「ハイライトナビゲーションバー」に適用できるようになったら。
The first two sections are using position:fixed.
This fixes the items to a position on the page. They don't move, even with scrolling.
The scrolling section uses position:absolute with a high z-index.
This scrolls fine and because it has a higher z-index than the fixed position elements, it scrolls over them.
There's several ways to do this, but the easiest is to simply make a div, and use the CSS
"position:fixed;"
property. This will cause the div to stick exactly where it is, relative to the browser window.
You may also want to set you z-index to a large value so that the div is certain to stay on top of the rest of the page.
メニューとヘッダーについては、 と を使用した単純な CSS ソリューションposition: fixedですz-index。メニューとヘッダーの両方position: fixedに がありますが、メニューには大きなz-index値があり、メイン コンテンツにはわずかに低い値があります。
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
フラグメントに関しては、JS を使用して行われます。W3Foolsにも同じことがあり、jQuery を使用して行われます。おそらくスクリプトを解読できます。ドキュメントのスクロールイベントにフックしているように見え、要素がビューポートの位置より上にあるかどうかを確認し、それに応じてアクションを実行します。