CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

CSSでスクロール時に固定されるナビゲーションバーを作成する方法

Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。

この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。

positionプロパティの基本構文

CSSにおけるpositionプロパティの基本構文は次のとおりです。

セレクタ {
    position: 値;
}

positionプロパティに指定できる主な値は以下のとおりです。

static … 初期値。通常の文書フローに従って配置されます。
relative … 通常の位置を基準として相対的に配置します。
absolute … 親要素を基準に絶対的な位置へ配置します。
fixed … ブラウザの表示領域（ビューポート）を基準に固定され、スクロールしても移動しません。
sticky … スクロール位置に応じて、relativeとfixedの性質が切り替わります。

スクロール時にナビゲーションバーを固定したい場合は、position: fixed;を使用します。top: 0;とwidth: 100%;をあわせて指定することで、画面最上部に全幅で固定できます。

実装例：スクロールで固定されるナビゲーションバー

以下は、HTML・CSS・JavaScriptを組み合わせた完全なサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<style>
#navigation-bar {
    overflow: hidden;
    box-shadow: inset 0 0 20px green;
}
a {
    float: left;
    display: block;
    margin-left: 2%;
    padding: 2% 4%;
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 1.2em;
    border: 0.5px ridge red;
}
a:hover {
    box-shadow: inset 0 0 14px red;
    font-size: 1.6em;
}
.content {
    background-color: coral;
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 80px;
}
</style>
</head>
<body>
<div class="content"></div>
<div id="navigation-bar">
<a class="active" href="#">logo</a>
<a href="#">SignUp</a>
<a href="#">SignIn</a>
<a href="#">More</a>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus ante quis odio rhoncus, sit amet porta nunc venenatis. Vivamus eu ex et risus vehicula semper eu eu elit. Aliquam tempor rutrum neque sit amet aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non eros ex. Suspendisse placerat tincidunt tortor a semper. Etiam molestie justo ac sapien auctor maximus. Etiam ut ante sollicitudin, tempor mauris nec, malesuada purus. Nunc malesuada sem sed fermentum eleifend. Cras ultrices velit eu blandit lobortis.
</p>
<img src="https://images.unsplash.com/photo-1612305876291-c369fea489b3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600" />
</div>
<script>
let nav = document.getElementById("navigation-bar");
let sticky = nav.offsetTop;
window.onscroll = function() {sticker()};
function sticker() {
    if (window.pageYOffset >= sticky) {
        nav.classList.add("sticky")
    } else {
        nav.classList.remove("sticky");
    }
}
</script>
</body>
</html>

コードのポイント解説

#navigation-bar … ナビゲーションバー本体です。floatを使ってリンクを横並びに配置しています。
a要素 … 各メニュー項目です。hover時に内側に赤い影が表示され、フォントサイズも拡大するインタラクティブな演出を加えています。
.stickyクラス … position: fixed; top: 0; width: 100%;を指定することで、画面最上部に全幅で固定されます。
.sticky + .content … 隣接セレクタにより、固定されたナビゲーションの高さ分だけコンテンツに上余白（padding-top: 80px）を確保しています。これにより、コンテンツがナビゲーションの下に隠れるのを防ぎます。
JavaScriptの処理 … window.onscrollイベントでスクロール量を常時監視し、ナビゲーションの初期位置（offsetTop）を超えたらstickyクラスを付与、戻ると解除します。

実行結果

このコードを実行すると、最初は通常の位置にナビゲーションバーが表示されます。ページを下にスクロールすると、ナビゲーションバーが画面上部に固定され、スクロール中も常に表示され続けます。

CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

補足：position: stickyを使えばJavaScript不要で実現できる

近年のモダンブラウザでは、JavaScriptを使わずにCSSだけで同様の挙動を実現できるposition: sticky;が利用可能です。ナビゲーションバーに以下を指定するだけで、スクロール時に自動的に固定されます。

#navigation-bar {
    position: sticky;
    top: 0;
}

対応ブラウザも十分に普及しているため、新規開発ではstickyの採用を検討する価値があります。ただし、親要素にoverflow: hiddenなどが指定されていると正常に動作しない場合がある点には注意してください。

CSSだけで実現する視差スクロール（パララックス）効果の作り方

IntersectionObserverを使って要素がCSSのposition:stickyで固定されるタイミングを検出する方法

CSSで固定フッター（スティッキーフッター）を作成する方法
CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&
CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック
CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>