ヘッダーを固定する

ヘッダーを固定する

完成

手順大枠

• cssを書く
• idをhtmlにつける
• jsで特定の高さになった場合にクラスをつける

cssを書く

positionで高さを固定 z-indexで要素を一番上に持ってくる

#header-title.fixed{
  position: fixed;
  top: 0;
  background-color: white;
  width: 100%;
  z-index: 10;
}

idをつける

クラスをつける要素にidをつける

  <div className="title" id="header-title">
     <h4>Home</h4>
  </div>

jsでクラスを付け外しする

(function () {
  $(window).scroll(()=>{
    let header = $("#header-title")
    let height = $(window).scrollTop()
    if (height > 30) {
      header.addClass("fixed")
    } else {
      header.removeClass("fixed")
    }
  })
}());

地味に詰まったところ

変数のスコープ範囲

(function () {
    let header = $("#header-title") ## ここに定義してしまっていた

  $(window).scroll(()=>{
       ## ここに定義が必要
    let height = $(window).scrollTop()
    if (height > 30) {
      header.addClass("fixed")
    } else {
      header.removeClass("fixed")
    }
  })
}());