ドロップダウンメニュー（上、左）
PC画面（横幅768px以上）ではCSSを使い、親要素の<li>へhoverしたら非表示にしていた子要素の<ul>を出現させる。
タブレット以下（横幅768px以下）ではJavaScriptを使い、親要素の<li>をクリックしたら非表示にしていた子要素の<ul>を出現させる。
動作の切り分けはJavaScriptを利用し、画面がリサイズされたら切り分けるようにする。
ドロップダウンメニュー（上）
See the Pen ドロップダウンメニュー（上） by Toru Katsumata (@Toru-Katsumata) on CodePen.
ドロップダウンメニュー（左）
See the Pen ドロップダウンメニュー（左） by Toru Katsumata (@Toru-Katsumata) on CodePen.
ドロップダウンメニュー（写真付き 上ナビ、左ナビ）
PC画面（横幅768px以上）ではCSSを使い、親要素の<li>へhoverしたら非表示にしていた子要素の<ul>を出現させる。
タブレット以下（横幅768px以下）ではJavaScriptを使い、親要素の<li>をクリックしたら非表示にしていた子要素の<ul>を出現させる。
動作の切り分けはJavaScriptを利用し、画面がリサイズされたら切り分けるようにする。
写真付き 上ナビ
See the Pen ドロップダウンメニュー（写真上） by Toru Katsumata (@Toru-Katsumata) on CodePen.
写真付き 左ナビ
See the Pen ドロップダウンメニュー（写真左） by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロールすると上部固定
jQueryを使いheaderの高さ以上スクロールしたらheaderに「fixed」というクラス名を付与する。クラスが付与されたらCSSでposition: fixed;を指定して上部にナビゲーションを固定する。
※この方法とは別に、JavaScriptを使わずCSSのみでheaderにposition: fixed;を指定して固定表示をする簡単な方法もある。
See the Pen スクロール上部固定 by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロール途中から上部固定
jQueryを使い、上部固定をスタートさせたい場所のid名を指定する。idの場所までスクロールしたらナビゲーションにクラス名を付与する。クラスが付与されたらCSSのアニメーションを使って固定部分をふわっと出現させる。
See the Pen スクロール途中から上部固定 by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロールするとハンバーガーメニューに変化
jQueryを使い、ヘッダーの高さ以上までスクロールをしたら、ヘッダーにクラス名を付与してCSSで非表示にする。同時に隠れていたハンバーガーメニューにクラス名を付与してCSSのアニメーションで出現させる。
ハンバーガーメニューがクリックされたら、ヘッダーにクラス名を再度付与し、CSSで前面に出現させる。
See the Pen スクロールするとハンバーガーメニューに変化 by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロール途中からヘッダーの高さが小さくなる
jQueryを使い、ヘッダーの高さ以上までスクロールをしたら、ヘッダーにクラス名を付与する。クラスが付与されたらCSSで高さを変更。
See the Pen スクロール途中からヘッダーの高さが小さくなる by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロール途中でヘッダーが消え、上にスクロールすると復活
jQueryを使い、指定したエリアidの高さ以上スクロールをしたら、ヘッダーにクラス名を付与する。クラスが付与されたらCSSで非表示にする。
さらに、JavaScriptでスクロール値の比較を行い、上にスクロールしている間はヘッダーを出現させるためのクラス名を付与して、CSSでヘッダーを表示する。
See the Pen スクロール途中でヘッダーが消え、上にスクロールすると復活 by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロールすると位置が固定して追従
CSSのposition: sticky;を使用してナビゲーションエリアを固定。position: sticky;に対応していないブラウザにはstickyfill.jsを読み込んで対応。
JavaScriptでブラウザの横幅が768px以下になった時にはナビゲーションを下部に移動して追従を解除する。
See the Pen スクロールすると位置が固定して追従 by Toru Katsumata (@Toru-Katsumata) on CodePen.
