2021.7.14

【js】指定の位置までスクロールしたらposition:fixedになるメニュー

  • CSS
  • メニュー
【js】指定の位置までスクロールしたらposition:fixedになるメニュー

まずはデモで動きを確認してください。

See the Pen
by nanami (@nanami_po)
on CodePen.

 

上部のグレーのエリアを通り過ぎると右に配置してあるメニューがposition:fixedになり、追従します。

 

HTML

 <div class="side_menu">
<p class="menu01"><a href="">MENU1</a></p>
</div>

 

追従するメニューが.side_menuの部分です。

 

CSS

.side_menu{
color: #fff;
font-size: 20px;
position: absolute;
right: 0;
top: 200px;
z-index: 1;
}
.side_menu.js_fixed{
position: fixed;
top: 20px;
}

//このあたりは装飾の部分なので調整してください
.side_menu p{
border-radius: 10px 0 0 10px;
height: 140px;
position: relative;
white-space:nowrap;
width: 40px;
}
.side_menu p a{
display: inline-block;
letter-spacing: 4px;
position: absolute;
writing-mode:vertical-rl;
-ms-writing-mode: tb-rl;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
}
.menu01{
background: #225fb3;
margin-bottom: 10px;
}

 

JS

$(function(){
var fix = $(".side_menu");
var fixTop = fix.offset().top;
$(window).scroll(function () {
if($(window).scrollTop() >= fixTop) {
fix.css("position","fixed");
fix.css("top","0");
} else {
fix.css("position","");
fix.css("top","");
}
});
});

 

fix.offset().topで画面の一番上から、.side_menuまでの高さを取得しています。

$(window).scroll内の記述が、スクロールしたときに起こる処理です。

$(window).scrollTop()が、ブラウザ全体のスクロール位置を取得しているので、if($(window).scrollTop() >= fixTop)の部分は、スクロール量がfixTop(ここでいう.side_menu)よりも多くなったら、という意味です。

つまり、もしスクロールして.side_menuを通り過ぎたらif文の中に記述してある内容を実行してくださいね、ということになります。

【js】指定の位置までスクロールしたらposition:fixedになるメニュー

 

elseの中には付与したcssを空にする指定が記述してありますので、スクロール量がfixTopよりも少なくなったらpositionとtopのcssが解除されます。

 

以上で実装は完了となります。

良かったら参考にしてください◎

Share Please

Read this too