【jQuery】特定範囲内で表示・スクロール追従するメニュー / サイドバー【レスポンシブ対応】
こんにちはNNCの中里です。
今回は特定の範囲内のみ表示・スクロール追従するメニューの作り方を紹介します。
上のように、ヘッダー・メインコンテンツ・フッターといった要素がページ上に存在し、その中のメインコンテンツ部分にスクロールが入った時のみ表示・追従するというイメージです。
メインコンテンツ部分からスクロールが外れた場合、メニューは非表示となります。
実際のコード
HTML・CSS・jQueryのコードです。
コードが表示されているとプレビュー画面がSP時の状態となってしまうため、下の画面左上の「HTML」をクリックしてから右下の「Return」をクリックしてPC時のプレビュー画面でご覧ください。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
HTML・CSSは主にページのスタイルを指定するためのものですので、解説は基本割愛とします。（CSSは一部だけ解説します）
編集ポイント
【CSS】
.main-side {
/* ここでメニューを非表示にする */
display: none;
width: 20%;
background-color: #fcc;
padding: 30px;
position: fixed;
right: 30px;
top: 30px;
}display:noneでメニューの初期状態を非表示にしています。
またposition:fixedで位置を固定し追従するようにしています。
@media screen and (max-width:767px) {
section {
width: 100%;
margin-left: 0;
}
.main-side {
position: static;
width: 100%;
}
}SP時のスタイルを指定しています。
.main-sideに対するposition:staticによって、SP時は固定表示ではなく通常位置に設定しています。
【jQuery】
if(window.matchMedia('(min-width:769px)').matches) {
}メニューをPCの画面幅(768px以上)の時のみ表示させるため、条件を作っています。
ここから今回実装する内容を以下にまとめます。
- ・スクロール位置を取得して変数に代入
- ・main要素の位置を取得して変数に代入
- ・最後のsection（.last）の位置を取得して変数に代入
- ・条件：
– スクロール量がmainから.lastまでの範囲内の場合サイドメニューを表示させる
– そうでない場合は非表示にする
という流れです。
それでは一つ一つ見ていきましょう。
$(window).scroll(function(){
})スクロールする度に命令が実行するようにします。
var posThis = $(this).scrollTop();scrollTop()を使い、現在のスクロール位置を取得して変数posThisに代入します。（変数名は任意）
var posMain = $("main").offset();offset()を使いmainの位置を取得して変数posMainに代入します。（変数名は任意
var pos = $(".last").offset();.lastの位置を取得して変数posに代入します。（変数名は任意
var posLast = pos.top - 500;ここがポイントになります。
スクロールが最下部まで到達してもposのtop位置に値が満たない場合に、上で調整をします（500部分は任意）
環境や条件によっては上の設定は行わなくてもOKです。
if (posThis > posMain.top && posThis < posLast) {
$(".main-side").fadeIn();
}
else {
$(".main-side").fadeOut();
}
スクロール量が変数posMainより大きく変数posLastより小さい（mainから.lastまでの範囲内）場合、 .main-side（サイドバー）を表示させます。
条件に満たない（スクロール位置がmainから外れている）場合は.main-sideを非表示にします。
一つ上で位置の調整を行わなかった場合は、下ように条件部分に入れている変数posLastを変数pos.topに変えていただく必要があります。
if (posThis > posMain.top && posThis < pos.top) {
$(".main-side").fadeIn();
}
else {
$(".main-side").fadeOut();
}サンプルデータ
今回はサンプルデータがありますのでよろしければこちらからダウンロードしてください！
ここまでの解説を見た上で、サンプルを開いて見ていただくとさらに分かりやすいかもしれません。
以上となります！
いかがでしたでしょうか？
コンテンツ表示範囲にのみメニューやサイドバーを表示・追従させたいというシチュエーションは多いかと思います。
そのような際に是非参考にしていただけたら嬉しいです！
