【jQuery不要】スクロールでヘッダーをヌルッと表示させる方法
2022/01/08
Webサイトでよく見かける、スクロールするとヘッダーがヌルッと出てくるあの仕様。
手軽に実現できないかどうか考え、JavaScriptのみで実装する方法を考えたのでご紹介します。2タイプ用意しており、コピペで簡単に使うことができます。
CodePenのデモを埋め込んでみたので、実際にスクロールして遊んでみてください。
HTML
基本的なHTMLの構成は以下の通りです。
<body>
<header>Header</header>
<div id="fixed-header">Fixed Header</div>
<div id="content">
...
</div>
<footer>Footer</footer>
</body>
スクロールで表示するヘッダーは#fixed-headerです。
スクロールで表示して固定
See the Pen Fixed Header1 by Fuma (@fuma_it) on CodePen.
下スクロールで100pxを過ぎたタイミングで、隠していた#fixed-headerを表示させます。
CSS
body {
background: #fff;
margin: 0;
}
header {
width: 100%;
font-size: 2em;
text-align: center;
color: #fff;
background: linear-gradient(100deg, dodgerblue, purple);
padding: .5em;
box-sizing: border-box;
}
#fixed-header {
position: fixed;
top: -70px;
width: 100%;
height: 70px;
line-height: 70px;
font-size: 2em;
text-align: center;
color: #fff;
background: black;
box-sizing: border-box;
transition: .5s; /* アニメーションタイミング */
}
#fixed-header.is-show {
top: 0;
}
#content {
height: 2000px;
}
.text {
font-size: 2em;
text-align: center;
margin: 2em 0 0;
}
footer {
width: 100%;
font-size: 2em;
text-align: center;
color: #444;
background: #f3f7f9;
padding: .5em;
box-sizing: border-box;
}
JavaScript
(function() {
const fh = document.getElementById('fixed-header');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 100) {
fh.classList.add('is-show');
} else {
fh.classList.remove('is-show');
}
});
}());
#fixed-headerの要素を取得し、100pxを超えてスクロールした場合に.is-showクラスを追加して表示させます。アニメーションのタイミングはコメントを入れたtransition部分で調整してください。
下スクロールで表示＆上スクロールで非表示
See the Pen Fixed Header2 by Fuma (@fuma_it) on CodePen.
先ほどのものと同様、下スクロールのときに隠していた#fixed-headerを表示させますが、上スクロール時は非表示にします。上側のコンテンツが見やすくなるので良いですね。
CSS
body {
background: #fff;
margin: 0;
}
header {
width: 100%;
font-size: 2em;
text-align: center;
color: #fff;
background: linear-gradient(100deg, dodgerblue, purple);
padding: .5em;
box-sizing: border-box;
}
#fixed-header {
position: fixed;
top: -70px;
width: 100%;
height: 70px;
line-height: 70px;
font-size: 2em;
text-align: center;
color: #fff;
background: black;
box-sizing: border-box;
transition: .5s; /* アニメーションタイミング */
}
#fixed-header.is-show {
top: 0;
}
#content {
height: 2000px;
}
.text {
font-size: 2em;
text-align: center;
margin: 2em 0 0;
}
footer {
width: 100%;
font-size: 2em;
text-align: center;
color: #444;
background: #f3f7f9;
padding: .5em;
box-sizing: border-box;
}
JavaScript
(function() {
const fh = document.getElementById('fixed-header');
const isUp = (function() {
const scrollElement = document.scrollingElement;
let flag, prePoint, scrollPoint;
return function() {
scrollPoint = scrollElement.scrollTop;
flag = prePoint > scrollPoint ? true : false;
prePoint = scrollPoint;
return flag;
}
}());
window.addEventListener('scroll', () => {
if (window.pageYOffset > 100) {
if (isUp()) {
fh.classList.remove('is-show');
} else {
fh.classList.add('is-show')
}
} else {
fh.classList.remove('is-show');
}
})
}());
スクロールした際の動作は最初のものと同じですが、スクロールの上下判定をするために少しコードを追加しています。
スポンサーリンク
コメントを書き込む