ページを下部にスクロールしていき、ファーストビュー下にあるメニューエリアを通過すると、上部にそのメニューが固定表示されるページ。
こんなことも、jQueryで簡単にできてしまいます。
この記事では、そんな上部にそのメニューが固定表示されるスニペット一式と、ちょっとした解説をしています。
かかかず
それではご覧ください。
実装後のサンプル
早速、実装後のサンプルです。
下にスクロールして、以下の要素を通り過ぎるとこのページの上部に固定して表示されます。また、元々設置した場所に戻ると、固定が解除されます。
- MENU1
- MENU2
- MENU3
コピペ用のコード
コピペ用のコードは、HTML・CSS・jQueryヘッダー の3種です。
- HTML … 表示させたい場所に設置します。
- CSS … CSSにコピペ
- jQuery …
<body>〜</body>の中のクロージングタグ前に設置します。
上記のようにそれぞれ設置すればOKです。
コードを表示する
HTML
<div class="stickyhead">
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</div>
CSS
/* 特定位置に固定 */
.stickyhead{
width: 100%;
height: 80px;
background: #ebfcfe;
position:relative;
z-index: 11;
}
.stickyhead.sticky{
position: fixed;
top: 0;
left: 0;
}
/* それ以外 */
.stickyhead ul {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
border: none;
height: 100%;
margin: 0;
}
.stickyhead ul li {
color: #6bb6ff;
font-weight: 500;
}
jQuery
$(function() {
let target = $(".stickyhead").offset().top;
$(window).on("scroll", function() {
let currentPos = $(window).scrollTop();
if(currentPos > target) {
$(".stickyhead").addClass('sticky');
} else{
$(".stickyhead").removeClass('sticky');
}
});
});コピペする時の注意点
この記事で紹介のコピペ用コードには、jQueryの組み込みが必要です。
jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。
MEMO
当サイトでは以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><head>〜</head>かかかず
jQueryは必須でないと動かないので、書きこんでからコピペください。
ちょっとしたコードの解説
ざっくりながら、jQueryのコードの解説です。
jQuery
offset().topで、ヘッダー要素の位置を取得して、$(window).scrollTop()で、現在の位置を取得しています。
スクロール量が、要素の位置を超えたときに、ヘッダー要素にstickyクラスを付与して、それ以外の場合はsticky のクラスが外れる仕組みです。
