トップへ戻る
BLOGS

JS headerの表示の有無をスクロール量に応じてコントロールしてみる

JS headerの表示の有無をスクロール量に応じてコントロールしてみる

今回は前回までの知識を生かして

headerの表示の有無をスクロール量に応じてコントロールしてみる

ということで早速、JSから書いていきます

まずはheaderを取得してきます。

const header = document.getElementById("header");

そして次にスクロールイベントの追加ですね

document.addEventListener("scroll",function() {
})

縦軸のスクロール量を測定する

window.pageYOffset;

これで簡単に現在のスクロール位置、量が計測出来ます。

ではこれを使い条件分岐でクラスの付替をしましょう。

document.addEventListener("scroll",function() {
  const scrollY = window.pageYOffset;
  if (scrollY > 0 ) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
})

簡単ですね

でもこれだと即時登場してしまうので、

他のパターンも考察して

特定のコンテンツを通過したら登場するようにします。

ではまずその特定のコンテツを取得し変数化しておきます。

const key_visual = doucment.getElementById("key_visual");

次にこの要素が見えなくなる、

つまり画面上部からこの要素の下端までの距離がわかれば

「見えなくなる」ということはわかりそうですね

.getBoundingClientRect().bottom;

この関数でその距離が図れます。

では上と同じようにif文で条件に指定してみましょう。

document.addEventListener("scroll",function() {
  if (document.getElementById("key_visual").getBoundingClientRect().bottom < 0){
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
})

これで自由に好きな場所から

headerを出現させることが出来ました。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA