2020.11.16
- HTML
- Javascript
スクロール後に追従型のヘッダーを表示させる方法
あるサイト案件で、トップ画面のメインビジュアルで表示させたグローバルメニューとは別に、スクロール後に別のグローバルメニューを表示させたいというものがありました。
メインビジュアルではデザインを優先させて、簡素なメニュー項目だけのヘッダーを表示させ、スクロール後に一般的な項目数の多いグローバルメニューを表示させるというものです。
今回の仕様
まず完成のイメージです。
See the Pen
スクロール後に追従型の別ヘッダーを表示させる by awakia0309 (@nyantora_03_09)
on CodePen.
一度表示させたヘッダーをそのまま追従させるのではなく、スクロールして画面から離れた後に、追従型のヘッダーを表示させるというものです。
HTMLとCSSでレイアウト
htmlはこちら。
サイトの仕様を踏まえて、メインビジュアルで表示させるヘッダーをheader-A、追従型のヘッダーをheader-Bとし、それぞれにid属性を指定していきます。
<header id="header_main">
<ul>
<li>header-A</li>
</ul>
</header>
<nav id="header_sub">
<ul>
<li>header-B</li>
</ul>
</nav>
<section>
コンテンツ
</section>cssはこちら。
headerのレイアウトは自由に変更していただいて大丈夫です。
ポイントとなるのは、追従型のヘッダーに加えているtransformになります。最初からpositionで固定させた状態にし、translateYで無理やりビューポートの画面範囲からはみ出させます。このマイナス数値はヘッダーの高さをもとにしています。
後述するJavaScriptでヘッダーにクラスscrolledを追加し、transformの値を修正させて画面上部からヘッダーを出現させるといったイメージです。
#header_main {
position: relative;
width: 100%;
background-color: #ddd;
ul {
width: 100%;
text-align: center;
li {
display: inline-block;
font-size: 1.5rem;
color: #1a1a1a;
padding: 2rem;
}
}
}
#header_sub {
position: fixed;
top: 0;
left: 0;
z-index: 1;
transform: translateY(-56px);
background: #1a1a1a;
width: 100%;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
ul {
width: 100%;
z-index: 10;
text-align: center;
li {
display: inline-block;
padding: 1rem;
font-size: 1rem;
color: #fff;
box-sizing: border-box;
}
}
}
#header_sub.scrolled {
transform: translateY(0);
}JavaScriptでスクロール量を判定
JavaScriptはこちら。
jQueryも読み込んでいます。
(function($) {
// masthead scroll
var header = $('#header_sub');
var adclass = 'scrolled';
var scrollY = 300;
$(window).scroll(function() {
if ($(window).scrollTop() > scrollY) {
header.addClass(adclass);
} else {
header.removeClass(adclass);
}
});
})(jQuery);4行目で追従用のヘッダーを指定して、5行目でクラスscrolledを追加しています。scrollYの値はヘッダーが降りてくるタイミングを画面トップの高さから指定しているものです。数値が大きくなるほどヘッダーが降りてくるタイミングが遅くなります。
こちらのブログを参考にさせていただきました。
https://qiita.com/gatespace/items/a9fa68dacc2e30f7f219
