Bricks Builder では、JavaScript や外部ライブラリを使わなくても
**標準機能だけで「追随（Sticky）ヘッダー」**を実装できます。
この記事では、
BricksLabs の「Sticky Header in Bricks」記事の内容をもとに
Bricksでヘッダーを追随させる基本設定から応用までを、日本語でわかりやすく解説します。
Bricksの追随ヘッダーとは？
追随ヘッダー（Sticky Header）とは、
- ページをスクロールしても
- ヘッダーが画面上部に固定され
- 常にナビゲーションが表示される
という、現在のWebサイトでは定番のUIです。
Bricksでは Headerテンプレートに専用のSticky設定が用意されており、
CSSを書かなくても実装できます。
Stickyヘッダーの設定場所
まずは設定場所から確認しましょう。
- Bricks → Templates
- ヘッダー用テンプレートを開く
（Template Type：Header） - 左下の 歯車アイコン（Template Settings） をクリック
- HEADER → Sticky Header セクションを開く
ここが、追随ヘッダーの中枢設定です。
Sticky Header の主な設定項目
Sticky header
追随ヘッダーを 有効化するスイッチ です。
まずは必ず ON にします。
Sticky on scroll
スクロール時にヘッダーを追随させる基本設定です。
- ON：通常の追随ヘッダー
- OFF：オーバーレイ用途向け（特殊ケース）
多くの場合 ONでOK です。
Slide up after（px）
この設定を使うと、
いわゆる 「Headroom風」 の動きを実装できます。
- 指定pxスクロールすると → ヘッダーが上に隠れる
- 上方向にスクロールすると → 再表示される
例：
Slide up after: 150px
ナビが邪魔にならない、モダンな挙動になります。
Scrolling background
スクロール後の ヘッダー背景色 を指定します。
- 色を指定 → 背景付きの追随ヘッダー
- 未指定 → 透明なまま追随（オーバーレイ風）
👉 ヒーロー画像の上に重ねたい場合は
あえて「未指定」にするのもアリです。
Scrolling text color
スクロール後の ナビゲーション文字色 を変更できます。
- トップ：白文字
- スクロール後：黒文字
といった切り替えが、CSSなしで可能です。
Scrolling box shadow
スクロール状態になったときに
box-shadow（影） を付ける設定です。
ヘッダーとコンテンツの境界がわかりやすくなり、
視認性が向上します。
Transition
追随時のアニメーション（動きのなめらかさ）を制御します。
通常はデフォルトで問題ありませんが、
動きを強調したい場合に調整します。
透明ヘッダー（オーバーレイ）の注意点
背景を指定しない「透明ヘッダー」を使う場合、
最初のセクションに注意が必要です。
よくある問題
- ヘッダーがコンテンツに被る
- テキストが読めなくなる
対策
ファーストビューのセクションに
ヘッダー分の padding を追加します。
padding-top: ヘッダーの高さ
これでレイアウト崩れを防げます。
JavaScriptや外部ライブラリは不要
この記事で紹介している方法は、
- Headroom.js
- カスタムJS
- 複雑なCSS
一切不要です。
Bricksのネイティブ機能だけで、
- 追随
- 背景切り替え
- 文字色変更
- 表示／非表示アニメーション
すべて実現できます。
まとめ
Bricksでヘッダーを追随させる場合は、
- Headerテンプレートの
Template Settings → Sticky Header - ここを正しく理解するだけでOK
特に重要なのはこの3点です。
- Sticky header を ON
- Scrolling background / text color の使い分け
- Slide up after での挙動制御
Bricksは「設定が分かれば、実装がとても楽」なビルダーなので、
ぜひ追随ヘッダーも標準機能で作ってみてください。
