【jQuery】追従ヘッダーの構造を理解しよう！

#スクロールしたら付いてくるヘッダー
最近は比較的見なくなったような気もしますが、私は職場で割と使います。
で、追従ヘッダー！？なんか難しそうじゃね！？と思っていた私は先人たちの素晴らしいアイテムをDLしては切り貼りし・・・
を繰り返していたのですが、地味に大変。（CSSいじったり・・・とか）
というわけで、自分で一から考えて設置できるか実験してみました！

##結果から

See the Pen 追従ヘッダー by かぺ (@kapeking) on CodePen.

結構それっぽくない？（自画自賛）

###自分的に取り入れたかったこと

• ヘッダーが何層かあるときに必要な層のヘッダーだけ追従させたい
• 追従してるときは半透明にしたい
• 追従に切り替わるときに「かくん」ってならないようにしたい

ではざっくり解説していきます！

##解説① 考え方
###動く前と動いた後の違い
【動く前】

【動いた後】

画像より。
nav01 前：普通 後：表示なし⇒display:none;でいけそう
nav02 前：普通 後：半透明で上部固定⇒background:rgba(252, 74, 26,0.8);で半透明、position:fixed;でウィンドウ固定
nav03 前：普通 後：表示なし⇒display:none;でいけそう

⇒つまり全部CSSでいけそう

###トリガー
何きっかけで変化が起こるのか？⇒スクロールしたら⇒nav02のとこまでスクロールしたら
なんとなくCSSでは無理そうだからここはjQueryで。

###まとめると
jQueryでスクロールイベントを作り、発火したら用意したクラス名をつけたり外したりしたらいける気がする。

##解説② やってみよう！【jQuery編】
早速だけど、jQueryのスクロールイベントってどういうやつなのかしら（全く分からない）
ネットで探してみたらちょうどいいやつ見つけました。

参考資料 スクロールしたらヘッダーの一部だけ固定する

スクロールイベントの例

$(window).on('scroll', function() {
  $('ヘッダーのクラス名を追加したい要素').toggleClass('追加するクラス名', $(this).scrollTop() > 〇〇px以上スクロールしたら発火するよ！)
});

こんな感じでいけそう。on(scroll)とか.scrollTop()とかはよくわからないので調べます ⇒【宿題】スクロールイベントについて調べる（後日提出）

##解説③ やってみよう！【CSS編】
今回追加したり外したりするクラス名を fixed とします。（参考資料のまま）
先にイベント発生前（要するに普通）のヘッダーとかナビとかを作ります

html

<nav>
  <div class="nav01">
    <h1>かぺの王国</h1>
  </div>
   <div class="nav02">
    <p>WORK</p>
     <ul>
       <li>home</li>
       <li>plofile</li>
       <li>work</li>
       <li>contact</li>
     </ul>
  </div>
 <div class="nav03">home > work > page01</div>
</nav>
<p class="main">親譲りの無鉄砲で小供の時から損ばかりしている。・・・（青空文庫より）
</p>

css

body{
  color:#FFF;
  margin:0;
}
body p{
  margin:0;
}
.nav01{
  background:#4abdac;
}
.nav02{
  background:#fc4a1a;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.nav02 ul{
  list-style:none;
  display:flex;
}
.nav02 p{
  font-size:20px;
  font-weight:bold;
}
.nav02 ul li{
  margin-left:20px;
}
.nav03{
  background:#f78733;
}
.nav01,.nav02,.nav03{
  padding:5px 20px;
  box-sizing:border-box;
}
.main{
  color:#444;
  line-height:4;
  background:#dfdce3;
}

ここにイベント発生後に起きてほしい変化を.fixed付きでcssに追加します。

追加するCSS

.nav01.fixed,nav03.fixed{
  display:0;
}
.nav02.fixed{
  width:100%;
  background:rgba(252, 74, 26,0.8);
  position:fixed;
  top:0;
  left:0;
  z-index:99999;
}

・・・動かしてみてわかりましたが、nav01とnav03のdisplay:0;はあってもなくても一緒ですね（笑）
せっかくだから残しとこ。

というわけで自作追従ヘッダー第一号完成です！もっといい方法ありそうだから改良していく予定です。