ステッキーヘッダー

2024年5月23日

ある地点まで縦にスクロールすると、上部の固定されたヘッダーの背景色や項目の色が反転するステッキーヘッダーについて今回は記述する。

今回は、ヘッダーの高さ分スクロールすれば反転するようにコードを記述する

１）HTML

 <header class="header" id="header">
    <div class="header__inner">
      <h1 class="header__site-title">
        <a href="./index.html" class="header__logo">CorpLogo</a>
      </h1>
      <div class="header__pc-nav pc-nav">
        <ul class="pc-nav__items">
          <li class="pc-nav__item"><a href="#">About</a></li>
          <li class="pc-nav__item"><a href="#">Service</a></li>
          <li class="pc-nav__item"><a href="#">News</a></li>
        </ul>
      </div>
      <div class ="btn">Contact</div>
    </div>
  </header>

２）CSS

.header {
  height: 74px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #ffffff;
  width: 100%;
}
.header__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  height: inherit;
  display: flex;
  align-items: center;
}
.pc-nav__items {
  display: flex;
}
.header__site-title {
  margin-right: auto;
}
.header__site-title a {
  font-size: 26px;
  font-weight: 500;
  color: #2B3F2F;
}
.pc-nav__item {
  margin-right: 66px;
}
.pc-nav__item a {
  font-weight: 500;
  color: #2B3F2F;
}
.btn {
  width: 130px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #2B3F2F;
  border-radius: 4px;
}
/*  fixedクラス追加ここから*/ 
.header.fixed {
  position: fixed;
  width: 100%;
  background-color:  #2B3F2F;
  top: 0;
  left: 0;
  z-index: 999;
  height: 74px;
}
.header__site-title a.fixed {
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
} 
.pc-nav__item a.fixed {
  font-weight: 500;
  color: #ffffff;
}
.btn.fixed{
    width: 130px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2B3F2F;
    background-color: #ffffff;
    border-radius: 4px;
}

３）JS

$(function () {
  var $win = $(window),
    $fv = $('.fv'),
    $header = $('.header')
  $nav = $('.pc-nav__item a')
  $logo = $('.header__site-title a')
  $btn = $('.btn')
  hdHeight = $header.outerHeight(),
  fvHeight = $fv.outerHeight(),
  fixedClass = 'fixed';
  $win.on('load scroll', function () {
    var value = $(this).scrollTop();
    if ($win.width() > 100)
      if (value > hdHeight) {
        $header.addClass(fixedClass);
        $nav.addClass(fixedClass);
        $logo.addClass(fixedClass);
        $btn.addClass(fixedClass);
      } else {
        $header.removeClass(fixedClass);
        $nav.removeClass(fixedClass);
        $logo.removeClass(fixedClass);
        $btn.removeClass(fixedClass);
      }
  });
});

手順は簡単にいうと以下の通りである

１）CSSにあらかじめ、反転する時の表示であるfixed クラスを対応する要素のマルチクラスとして定義する
２）JSで反転させたい要素のクラスを変数に格納する
３）$header.outerHeight()でヘッダーの高さを取得する　
４）反転後の表示を定義したfixed クラスを変数に格納する
５）var value = $(this).scrollTop();で現在のスクロール位置を取得する
６）value > hdHeightヘッダーの高さ分スクロールしたので、fixed クラスを追加して（addClass）
有効にさせることにより反転する

なおFVを過ぎた所で反転させたければ、value > hdHeight を fvHeight に変更する