Warning: Undefined array key 3 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 3 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
当サイトでも実装されている「スクロールでヘッダー可変」を、改めてネイティブなJavaScriptで作りました。
と言っても、「可変をするヘッダー」の実装はかなり簡単なコードで可能なので、参考にしてみてください。
.scrollTop
.scrollTop は、要素の内容が現在のスクロール位置を取得・設定するプロパティです。ウィンドウ内のスクロールが一番上にある状態や、そもそもスクロールがない場合に「0」になります。
一例として、.scrollTop を使った記述は以下の通りです。
const y = document.body.scrollTop;上記の例の場合、縦にどれくらいスクロールしたかを取得します。.addEventListener
この記事では .scrollTop プロパティに .addEventListener スクロールを絡めてスニペットを作っています。
可変のヘッダーサンプル
早速サンプルです。
以下はこのページをキャプチャした動画ですが、このように下方へスクロールすると上部に固定されているヘッダーが可変しながら、少し透過して小さくなります。
そして、またページの最上部へスクロールすると元の状態へ戻ります。
サンプルのコード
コードはHTML・JavaScript・CSSの3種類です。コード量は少なめですが、順に解説していきます。
HTML
HTMLは、任意のid名をdivタグに付与したこの一文のみです。
<div id="header">SampleのHeader</div>サンプルでは、idに「header」という名前をつけています。
JavaScript
JavaScriptでは、.addEventListener のスクロールをトリガーにして、Y方向の80pxを境にして if で処理を分岐します。
window.addEventListener('scroll', function(){
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("header").style.height = "40px";
document.getElementById("header").style.background = "rgb(255,255,255,.4)";
} else {
document.getElementById("header").style.height = "80px";
document.getElementById("header").style.background = "rgb(255,255,255,1)";
}
});上記のように80pxを超えた場合には、高さを40pxに可変して透過にし、ページ最上部から80px以内に戻ると、サイズと透過もなくなります。
もしも、スクロール可変じゃなく、色々とデザインを変更する場合は、toggle メソッドを使った方がいいでしょう。
CSS
可変する時のサイズと背景色は、JavaScriptでプロパティを書き換えるので、CSSのコードも少なくなっています。
#header {
background-color: #FFF;
padding: 0;
color: #313131;
font-weight: bold;
position: fixed;
top: 0;
width: 100%;
transition: 0.3s;
height: 80px;
left: 0;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
box-shadow: 0 3px 6px rgb(0 0 0 / 18%);
}CSSはこれだけですが、ヘッダーの中にメニューを置いた場合はこれに加えて色々書いていく感じです。
