【QooQ】ナビゲーションバーを上部に固定する方法

前回の記事で「ナビバーを上に張り付ける(固定する)カスタマイズも知りたい」というリアクションを頂きましたので、リクエストにお応えして手順を紹介したいと思います。(リクエストがなくてもたぶん書いてたと思いますがw)

下にスクロールしてもナビバーが上に固定された状態で着いてくるようになります。
数行の CSS を追記するだけの簡単作業です。
同じようなレイアウトのテーマであれば、QooQ 以外でも 適用できるかも。ちなみに私、シンプルテーマを使ってた時もこのカスタマイズをやってました。

ナビバーの位置

QooQ のカスタマイズでナビバーをヘッダーの下に移動させている方が結構多いようですが、ナビバーがヘッダーの上にあるか下にあるかでそれぞれ追加コードが異なります。

ちなみにナビバーとヘッダーの位置を上下入れ替える方法は、こちらのブログ記事でとても解り易く解説されていますのでご参照下さい。

moca＊Bloggerメモ＊2nd

Blogger 「QooQ」 カスタマイズ＊ヘッダー・ナビゲーションバー

https://www.moca-memo.com/2020/02/blogger-qooq-header.html

テーマ編集は必ず予めバックアップを取ってから行って下さい。

追記 CSS

ナビバーがヘッダーの上にあるデフォルトの状態の場合

ナビバーとヘッダーの間に隙間ができたり、重なってしまう場合は
#header の margin-top の値で微調整して下さい。

#navigation {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 5;
}
#header {
    margin-top: 30px;
}

ナビバーをヘッダーの下に移動させている場合

#navigation {
  position: -webkit-sticky; /*Safari 対応*/
  position: sticky;
  top: 0;
  z-index: 5;
}

2020/07/22 追記:
こちらの position:sticky の方法は、最初の「ナビバーがヘッダーの上にあるデフォルトの状態」でも使えますが、IE では非対応のため、ナビバーが固定されませんのでご注意下さい。

補足

自動目次やスムーススクロールを導入されている環境の方は、こちらの記事も御覧ください。
スクロール停止位置で見出しとナビバーが重なる問題の改善方法です。

ふじろじっく

自動目次とスムーススクロール

目次自動生成&スムーススクロールのスクリプトを導入しました。

https://fujilogic.blogspot.com/2019/10/auto-toc-with-smooth-scroll.html#ps1