KATUBLO
2018年10月21日

【jQuery】スクロールしたら要素を固定する機能を追加してみた

 

ゴール

JQueryを持ちいて、スクロール時に要素をある一定の位置に固定する機能を追加する。

 

 

固定する要素

 

今回固定する要素は以下の「div.profile」を固定するコードを実装していく。ちなみにこれは当ブログの旧デザイン。懐かしいです。

 

 

 

htmlの構成図

 

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

 

「rightクラス」の中に「profileクラス」が含まれている。

 

 

実装

 

CSS

 

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を排除するという仕組みです。

 

結果

 

 

 

 

 

画像だとわかりにくいですが、一応うまくいってます。GIFとかでUPしたほうがよかったですね。

 

 

参考サイト

 

 

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

プロフィール

@KATUO

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

過去の投稿