こんにちは、今回は下にスクロールすると消えて上にスクロールすると復活するヘッダーを実装するためのJavascriptを紹介したいと思います。
PCのブラウザ以外もiOSやAndroidでも動作確認しましたので、うまく動くと思います。
デモ
というわけでコピペで使えるサンプルコードを紹介したいと思います。
See the Pen Untitled by TMあさ (@TM-the-styleful) on CodePen.
html
<header></header>htmlは<header>タグで挟んでご自由に作成してください。
すでにヘッダーを作成されている場合はおそらくすでに<header>タグで挟んでいると思うのでそのままで大丈夫です。
CSS
header {
position: fixed;
top: 0;
transition: .3s cubic-bezier(.24, .1, .32, .1);
}CSSではヘッダーをposition: fixedで固定し、top: 0で一番上に固定を指定します。
またtransition: .3s cubic-bezier(.24, .1, .32, .1)でゆっくり消えたり表示されたりするようにしています。
このコードは必要ありませんが、ぱっぱっと消えたり表示されてしまいます。
Javascript
Javascript版、jQuery版両方用意しました。
環境に合わせてお好きな方をご利用ください。
Javascript版
// ヘッダー
window.addEventListener('load', function() {
var header = document.querySelector('header');
var headerHeight = header.offsetHeight;
var startPos = 0;
window.addEventListener('scroll', function() {
var scrollPos = window.scrollY;
if (scrollPos > startPos && scrollPos > headerHeight) {
header.style.opacity = '0';
} else {
header.style.opacity = '1';
}
startPos = scrollPos;
});
});See the Pen Untitled by TMあさ (@TM-the-styleful) on CodePen.
jQuery版 (jQueryがインストールされている場合)
こちらのコードはjQueryがインストールされている必要があります。
// ヘッダー
$(function() {
var headerHeight = $('header').outerHeight(),
startPos = 0;
$(window).on('load scroll', function() {
var scrollPos = $(this).scrollTop();
if ( scrollPos > startPos && scrollPos > headerHeight ) {
$('header').css('opacity', '0');
} else {
$('header').css('opacity', '1');
}
startPos = scrollPos;
});
}); See the Pen Untitled by TMあさ (@TM-the-styleful) on CodePen.
こちらのJacascriptまたはでは下スクロールしたら<header>タグの要素をopacity: 0 で消して。上スクロールしたら<header>タグの要素をopacity: 1で表示しています。
環境に合わせて、好きな方をコピペしてください。
またトップまでスクロールされている場合は<header>タグの要素をopacity: 1で表示しています。
まとめ
いかがでしたでしょうか。
直接<header>タグを指定して表示させたり消したりしているので、htmlは特にいじらなくても今の環境のままコピペすれば使えると思います。
ご参考にしていただければ。
ではでは。