今回は、「下にスクロールしたら消えて上にスクロールしたらheaderが表示される実装」を紹介します。
【JavaScript】下にスクロールしたら消えて上にスクロールしたらheaderが表示される実装
完成形はこちら。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
上にスクロールしたらheaderが表示されることが分かるでしょう。
HTML
<header class="header">
<div class="header__inner">
<div class="header__logo">
<h1>headerです</h1>
</div>
</div>
</header>
<div class="main-view"></div>
<div class="boxs">
<div class="box">
<h2>ボックス1です。</h2>
</div>
<div class="box">
<h2>ボックス2です。</h2>
</div>
<div class="box">
<h2>ボックス3です。</h2>
</div>
</div>
headerとmain-view、そして下にスクロールできるようにboxを用意しました。
CSS
.header {
background: rgba(158,134,134,0.7);
padding: 20px;
position: fixed;
top: 0;
transition: .5s;
width: 100%;
z-index: 999;
&__inner {
display: flex;
align-items: center;
max-width: 1000px;
margin: 0 auto;
justify-content: center;
}
&__logo {
h1 {
font-size: 1.6rem;
}
}
}
.header.hide {
transform: translateY(-100%);
}
.main-view {
background-color: sienna;
height: 500px;
}
.boxs {
max-width: 1000px;
margin: 0 auto;
padding: 100px 20px;
.box {
height: 500px;
background-color: skyblue;
text-align: center;
line-height: 500px;
font-size: 1.6rem;
margin-bottom: 80px;
}
}
今回はscssを使ってCSSコードを書きました。
headerはhideクラスがついたらブラウザから消えるようにします。
JavaScript
jQueryを使うので、以下のCDNをまずbodyの閉じタグ直前に書きましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
そしてコードはこちら。
var startPos = 0, winScrollTop = 0;
$(window).on('scroll', function () {
winScrollTop = $(this).scrollTop();
if (winScrollTop >= startPos) {
$('.header').addClass('hide');
} else {
$('.header').removeClass('hide');
}
startPos = winScrollTop;
});
下にスクロールしたらheaderが消え、上にスクロールしたらhideクラスが取れてheaderがブラウザに表示されるようにしました。
まとめ
以上が、「下にスクロールしたら消えて上にスクロールしたらheaderが表示される実装」でした。
コピペでも使える実装なので、是非参考にしてみてください！
