JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptで作るスティッキーナビゲーションバーの実装方法

スティッキーナビゲーションバーとは、ページを下にスクロールしても画面上部に固定され続けるナビゲーションバーのことです。CSSのみでもposition: stickyで似た挙動を実現できますが、本記事ではJavaScriptのスクロールイベントと組み合わせて、指定した位置に達した時点でナビゲーションバーを固定表示する方法を解説します。

実装の仕組み

この実装では、以下の流れでスティッキー効果を実現しています。

  • window.onscrollイベントでページのスクロールを常に監視します。
  • offsetTopで取得したナビゲーションバーの初期位置と、現在のスクロール量（window.pageYOffset）を比較します。
  • スクロール量が初期位置以上になったら、position: fixed; top: 0;を定義した.fixedクラスをナビゲーションバーに追加し、画面最上部に固定します。
  • スクロールが元に戻ればクラスを削除し、通常のドキュメントフロー内の表示に戻します。

また、.fixed + .sample-content { padding-top: 60px; }のように隣接するコンテンツへパディングを設定することで、ナビゲーションバーが固定された瞬間にコンテンツが急に上へ詰まって見える「ガタつき」を防いでいます。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
    margin:0px;
    margin-top:10px;
    padding: 0px;
    height: 150vh; /* スクロール効果を発生させるため */
}
nav{
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
}
.links {
    display: inline-block;
    text-align: center;
    padding: 14px;
    color: rgb(178, 137, 253);
    text-decoration: none;
    font-size: 17px;
}
.links:hover {
    background-color: rgb(100, 100, 100);
}
.selected{
    background-color: rgb(0, 18, 43);
}
.fixed{
    position:fixed;
    top:0;
}
.fixed + .sample-content{
    padding-top: 60px;
}
</style>
</head>
<body>
<div class="sample-content">
<h1>Here are some headers</h1>
<h2>Here are some headers</h2>
<h3>Here are some headers</h3>
<h4>Here are some headers</h4>
</div>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
<div class="sample-content">
<h1>Here are some headers after nav</h1>
<h2>Here are some headers after nav</h2>
<h3>Here are some headers after nav</h3>
<h4>Here are some headers after nav</h4>
</div>
<script>
window.onscroll = scrollShowNav;
let navEle = document.getElementsByTagName("nav")[0];
let stickyTop = navEle.offsetTop;
function scrollShowNav() {
    if (window.pageYOffset >= stickyTop){
        navEle.classList.add("fixed");
    } else {
        navEle.classList.remove("fixed");
    }
}
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSとJavaScriptで作るスティッキーナビゲーションバーの実装方法

指定した位置までスクロールすると、ナビゲーションバーは以下のようにposition: fixedと同じ挙動になり、画面上部に固定されます。

CSSとJavaScriptで作るスティッキーナビゲーションバーの実装方法

  1. JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

    JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。 ドラッグ可能なDIV要素のサンプルコード 以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。 <!DOCTYPE html> <html> <style> body {

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini