.scrollTop

JavaScriptの.scrollTopでスクロールしたらヘッダーの高さ・大きさを可変

2022年3月8日2022年3月21日 2分

当サイトでも実装されている「スクロールでヘッダー可変」を、改めてネイティブなJavaScriptで作りました。

と言っても、「可変をするヘッダー」の実装はかなり簡単なコードで可能なので、参考にしてみてください。

SampleのHeader

.scrollTop
可変のヘッダーサンプル
サンプルのコード

.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はこれだけですが、ヘッダーの中にメニューを置いた場合はこれに加えて色々書いていく感じです。