今日このウェブサイトが見つかりましたhttp://www.forward-thinker.co.uk/誰もこのような固定ヘッダを作る方法を知っていますか?スティッキーヘッダーCSS/JS
答えて
この特定のサイトはjQueryの$(window).scroll
eventを利用しています。スクロールされた領域の上部($(this).scrollTop();
)が特定の高さを下回っているかどうかをチェックします。その場合は、ヘッダのcssに、position:fixed
を含むクラスを追加します(ヘッダの一部だけがスクロールするため、高さも変更されます)。スクロール先の領域が上部に近い場合、スクリプトはposition:fixed
を含むクラスをヘッダーのCSSから削除し、高さを元の値に戻します。
ありがとう、私はそれを試してみます。 – DaveS
推奨事項として、 'scroll'イベントを使ってヘッダー上のクラスをトグルすることをお勧めします。 CSSをCSSファイルに保存しておいてください。 – zzzzBov
@zzzzBov素晴らしい提案!それは実際にサイトが行うことです。回答を更新しています... – NickAldwin
- 1. スティッキーヘッダー - スクロールのバギージャンプ
- 2. スティッキーヘッダー - スクロール - CSS/jQuery
- 3. スティッキーヘッダーを持つUICollectionView
- 4. 複数のスティッキーヘッダーとサイドバー
- 5. jQuery - スクロールダウン時に縮むスティッキーヘッダー
- 6. スティッキーヘッダーを切り替えるには?
- 7. React Native:2つのスティッキーヘッダーを持つ2つのスクロールビュー
- 8. 別のdivの上にスクロールした後にdivを表示するにはどうすればいいですか?
- 9. スーパースリムライブラリは、複数のテキストビューを持つヘッダーをサポートしていません
- 10. スケーラブルなdivとstickyヘッダーとフッター
- 11. Iは、ユーザにデータとの要件は以下の通りであるような表を提示するソリューション開発してい
- 12. スムーズスクロールでスティッキーナビゲーションがジャンプしています
のFirefox + Firebugの=それは –
やChrome +開発者ツール – NickAldwin
またはInternet Explorer + F12 :-P – 2GDev