[jQuery]スクロールして、要素が現れたら、固定(fix表示)になるみたいなやつ(offset()とscrollTop()比較)

最終更新日:2022.06.09 [木] 公開日:2022.03.30 [水] カテゴリー:html・CSS・jQuery・JS備忘

Pocket
Facebook にシェア
LINEで送る

よくヘッダーとかでも見るアレです。
スクロールして、それが表示されたらヘッダーに固定される!みたいな。
説明が難しいのでデモページ



HTML

CSS

jQuery


offset().top:要素のトップからの距離
scrollTop();スクロールした距離

この2つを比較してスクロールが超えた瞬間に固定したいボックスにクラス名をつけて
そのクラスにfixさせるスタイルを当てている・・・と言うだけの、ごくシンプルなものです。

別にヘッダーに限らず、また、fixに限らず、スクロール量と位置を比較して・・・て言うこの方法は、いかようにも、なんとでも使えるかと思います。ので、備忘。


スポンサーリンク

コメントを残す

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

CAPTCHA