KATUBLO
2018年10月21日

【jQuery】スクロールした時に要素を固定する機能を追加する方法

こんにちは。KATUOです。今回はJQueryを持ちいて、スクロール時に要素をある一定の位置に固定する機能を実装する方法について解説していこうと思います。

 

JQueryで固定したい要素

今回固定する要素は以下の「div.profile」を固定するコードを実装していく。ちなみにこれは当ブログの旧デザイン。今見るとかなりレトロな感じがします。笑

 

 

 

 

htmlの構成図

htmlの構成的には下図のような構成になっています。

 

「rightクラス」の中に「profileクラス」が含まれていることがわかりますね。

 

 

JQueryで要素を固定するプログラム

 

CSSのプログラム

 

JQueryのプログラム

 

 

JQueryで要素を固定するプログラムの解説

 

基本コードに解説のコメントをいれていますが、ポイント部分を掻い摘んで解説していきます。

 

$() とは

$()はJQueryの関数です。公式サイトを参考に機能をまとめておきます。

 

 

機能に関する説明が書いてありました。

 

In the first formulation listed above, jQuery() — which can also be written as $() — searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements:

 

[1] $()は別途、JQuery()として書ける。

[2] DOMを通して、サイトから()に記述された要素と一致するセレクタを探し、JQueryオブジェクトを返す。

 

簡単な全体ロジック

固定するCSSを適応するロジックは簡単で、「profile」クラスのTopからの位置を、画面をスクロールしたときの現在のTopからの位置が上回っていた時に固定するCSSを適応。そうでなければCSSを排除するという仕組みです。

 

以下のサイトを参考にさせていただきました。

 

 

今回紹介したプログラムを使用すると、要素をスクロール時に固定することができます。ぜひ参考にしてください。

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです!

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習をスタート。この時期からプログラミングにどハマりし、現在までに「AIスタートアップ」「Webマーケティング会社」でエンジニアとしての業務に没頭してきた。

大学生必見就活イベント