Written by Kasumi

【jQuery】途中からヘッダー、ナビ、サイドバー等を追従させる方法【簡単】

途中からヘッダー、ナビ、サイドバー等を追従させたい!

トップからのpx数で決めるのではなく、ある要素のタグまでスクロールしたら追従させるようにしたい。

上記のような悩みに回答します。

※本記事ではjQueryを使うので、事前にCDNもしくはダウンロードしてソースに読ませて置いてください。

以下ソースをスクリプト内にコピペしよう

上記ソースをスクリプト内にコピペし、var hogeのセレクタ名を追従させたいセレクタにクラスを変更してください!

内訳としては、ある要素(今回の場合はhoge)を宣言。

ある要素の位置をoffsetで取得。

トップからある要素までスクロールした時に、その要素にクラスを付与する記述をしています。

付与するクラス名にposition: fixed;をCSSで記述すれば完成!

以上で解説を終わります。

目次

関連記事

jQuery

【簡単】JQueryを使ってカテゴリー毎に出し分けれる簡易検索フォームを作る方法

更新日:2022.09.09
1556
jQuery

[jQuery]デバイス幅(PC・スマホ)で条件分岐する方法【簡単】

更新日:2022.09.09
856
jQuery

jQueryで画像読み込み完了後にイベントを実行する方法

更新日:2022.09.09
3116
HTMLCSS jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
567