【jQuery】スティッキーヘッダーの作り方

サンプル

ページの下方向にスクロールしていくと画面上部に固定化されるヘッダー(もしくはナビ等)のこと。

固定化したい要素に”position:sticky;”を設定すればそれで実現できるみたいだが、自作してみた。

ソースコード

HTML

ダミーテキストは以下から取得。

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

https://lipsum.sugutsukaeru.jp/

CSS
jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です