スクロール: タイトルを修正する方法

Question

私は、特定のピクセル数までスクロールすると固定され、所定の位置に留まるヘッダーを作成しています。

CSS と HTML だけを使用してこれを行うことはできますか、それとも jquery も必要ですか?

理解できるようにデモを作成しました。助けていただければ幸いです。

http://jsfiddle.net/gxRC9/4/

リーリー

Answer 1

Coopの回答を変更しました。例 FIDDLE を確認してください。 私の変更は次のとおりです:

リーリー

Answer 2

スクロール イベントを処理するには、いくつかの JS が必要です。最良の方法は、特定のポイントを超えてスクロールするときに関連する div に割り当てられる固定位置に新しい CSS クラスを設定することです。

HTML

リーリー

CSS

リーリー

jQuery

リーリー

フィドルの例: http://jsfiddle.net/gxRC9/501/

---

編集: 拡張例

トリガー ポイントは不明だが、スティッキー要素が画面の上部に到達したときにトリガーする必要がある場合は、offset().top を使用できます。

リーリー

拡張フィドル例: http://jsfiddle.net/gxRC9/502/