ページスクロール時にヘッダーにクラスを追加する方法

やりたいこと

「スクロールした時にheaderにクラスをつける」というのをjQueryなし、JavaScriptのみで実装しました。

最上部からの位置（HTML要素の表示位置）は、jQueryだと「offset()」ですぐに取得できます。
しかし、JavaScriptのみだと、コードを組み合わせる必要があります。

結論から言いますと、「Element.getBoundingClientRect().top + window.pageYOffset」 で取得できます。
それぞれのコードの役割は以下になります。

getBoundingClientRectでは画面の左上から、描画しているDOMの矩形の情報を取得することができます。 そのため、 getBoundingClientRect().top とすることにより座標を取得することができます。
しかし、この getBoundingClientRect() はHTML文書の左上でなく、 画面の左上 からの位置情報になります。つまり、画面をスクロールすると値が変わってしまいます。

https://blog.foresta.me/posts/dom_position_from_top/

「Element.getBoundingClientRect().top」は、画面（ウィンドウ）の左上の位置情報を取得するので、
スクロールしても表示位置が変わりません。

なので、これにスクロール量を足す必要があります。
現在のスクロール量を取得するのが「window.pageYOffset」になります。

コードについて詳しく知りたい方は、こちらの参考サイトをご参照ください。

blog.foresta.me

HTML/JavaScriptでページ最上部からの位置を取得する方法 こんにちは、kz_moritaです。 最近はVue.js / Nuxt.js あたりで Web フロントを書いたりしています。 今回は、ページの最上部からある特定のDOMの位置座標を取得するのにち...

実装したコード

上記を踏まえて、実装したコードがこちらになります。

//header
//ページ最上部からの位置を取得し、ファーストビューから出る時くらいにクラスをつける
const header = document.getElementById("js-header");
window.addEventListener('scroll', function () {
  let offsetTop = header.getBoundingClientRect().top + window.pageYOffset;
  if (300 < offsetTop) {
    //ページ最上部ではなかったら、headerにクラスをつける
    header.classList.add("is-down");
  } else {
    header.classList.remove("is-down");
  }
});