BLOG

Sticky Navigation Bar On Scroll

おはようございます。

たった今ランサムウェア感染の様子というYou Tubeを見ていてハッカー映画のようなのが実際にあるもんやなと感心してましたどうもハヤトワンです。

※決して憧れてるわけではない

ということで、今朝のコーディングはこれ。

https://github.com/HayatoMoromasa/sample/tree/main/StickyNavigationBarOnScroll

スクロールするとヘッダーのデザインが変わる仕様

jsはこんな感じ

        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            header.classList.toggle('sticky', window.scrollY > 0);
        });

最近、画面下部に問い合わせボタンを実装する機会があって、それの実装に参考にさせてもらったコードはこちら

// ヘッダーを取得
const header = document.getElementById("header");

// ヘッダーの高さを取得
const hH = header.clientHeight;

// 現在地を示す変数を定義
let pos = 0;

const onScroll = () => {
  // スクロール位置がヘッダーの高さ分より大きい場合にclass名を追加し、そうでない場合にclass名を削除
  if(pos > hH) {
    header.classList.add('header--unpinned');
  } else {
    header.classList.remove('header--unpinned');
  }
};

window.addEventListener("scroll", () => {
  // スクロールするごとにpos(現在地)の値を更新
  pos = window.scrollY;
  onScroll();
});

引用元

https://chocolat5.com/tips/how-to-hide-header-on-scroll/

ありがとうございます!

ということでおわり。

今日もいい1日を!