スティッキーヘッダーCSS/JS

今日このウェブサイトが見つかりましたhttp://www.forward-thinker.co.uk/誰もこのような固定ヘッダを作る方法を知っていますか？スティッキーヘッダーCSS/JS

2011-08-02 DaveS

のFirefox + Firebugの=それは –

やChrome +開発者ツール – NickAldwin

またはInternet Explorer + F12 :-P – 2GDev

この特定のサイトはjQueryの$(window).scrolleventを利用しています。スクロールされた領域の上部（$(this).scrollTop();）が特定の高さを下回っているかどうかをチェックします。その場合は、ヘッダのcssに、position:fixedを含むクラスを追加します（ヘッダの一部だけがスクロールするため、高さも変更されます）。スクロール先の領域が上部に近い場合、スクリプトはposition:fixedを含むクラスをヘッダーのCSSから削除し、高さを元の値に戻します。

出典

2011-08-02 14:01:13 NickAldwin

ありがとう、私はそれを試してみます。 – DaveS

推奨事項として、 'scroll'イベントを使ってヘッダー上のクラスをトグルすることをお勧めします。 CSSをCSSファイルに保存しておいてください。 – zzzzBov

@zzzzBov素晴らしい提案！それは実際にサイトが行うことです。回答を更新しています... – NickAldwin