KATUBLO

PROFILE

プロフィール

@KATUO

法政大学理工学部電気電子工学科 現在3年生
趣味はプログラミング、ランニング、釣り、カフェ巡り。まだまだ初心者ですが, プログラミング系の記事を中心に書いていきます。

TWITTER

ツイッター

RELATED ARTICLE

関連記事

投稿日:2018年10月21日

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

今回は

「jQueryを使って, スクロールしたら要素を固定する機能してみた」

について書いていきます。

 

 

 

 

 

 

 

 

 

参考したサイトはこれ

 

 

すごく丁寧に紹介されていて, 非常にわかりやすい。

 

 

 

 

 

 

 

 

 

 

 

 

ちなみに固定したい要素はプロフィールのdivタグ

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

早速実装してみた。

 

 

 

 

 

 

各種コードについて解説していく。

 

 

 

 

$(‘.right’),$(‘profile’)でrightクラスのタグを指定し、変数に格納。

 

 

$profile.outerHeight()でprofileタグの高さを取得。

 

 

$profile.offset().topでトップからの高さを取得。

 

↓のサイトで詳しくかかれています。

 

 

 

 

$(this).scrollTop() はリアルタイムでスクロールした距離を取得する。

 

このスクロール距離がprofilePosを超えたら.profileを固定するcssを装着するという仕組み。

 

 

 

 

 

 

結果をみてみると

 

 

 

 

 

 

 

 

 

↑きちんと.profileが固定されていることがわかる。

 

 

 

 

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