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

CSSとJavaScriptでスクロール時にナビゲーションメニューを非表示にする方法

Webページを下にスクロールしたときにナビゲーションバーを自動的に隠し、上にスクロールすると再び表示される——このテクニックは、限られた画面領域を有効活用したいモダンなWebサイトで広く使われています。本記事では、CSSとJavaScriptを組み合わせてこの機能を実装する方法を、サンプルコードとともにわかりやすく解説します。

実装のポイント

この機能を実現するための主なポイントは以下のとおりです。

  • position: fixed でナビゲーションバーを画面上部に固定する
  • transition プロパティを使い、表示・非表示の切り替えをスムーズにアニメーションさせる
  • window.onscroll イベントでスクロール位置を常時監視する
  • スクロール量が一定の値（ここでは20px）を超えたら、ナビゲーションバーを画面の外側へ移動させて非表示にする

サンプルコード

以下は、スクロールに応じてナビゲーションメニューを非表示にする完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールでナビゲーションを非表示にする</title>
<style>
body{
    margin:0px;
    margin-top:60px;
    padding: 0px;
}
nav{
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
    transition: 0.5s;
}
.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);
}
.sample-content{
    height: 150vh;
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">ホーム</a>
<a class="links" href="#">ログイン</a>
<a class="links" href="#">新規登録</a>
<a class="links" href="#">お問い合わせ</a>
<a class="links" href="#">詳細情報</a>
</nav>
<div class="sample-content">
<h1>見出しのサンプル</h1>
<h2>見出しのサンプル</h2>
<h3>見出しのサンプル</h3>
<h4>見出しのサンプル</h4>
<h1>見出しのサンプル</h1>
<h2>見出しのサンプル</h2>
<h3>見出しのサンプル</h3>
<h4>見出しのサンプル</h4>
</div>
<script>
window.onscroll = scrollShowNav;
function scrollShowNav() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementsByTagName("nav")[0].style.top = "-50px";
    } else {
        document.getElementsByTagName("nav")[0].style.top = "0px";
    }
}
</script>
</body>
</html>

コードの解説

このコードの仕組みを簡単に説明します。

  • nav要素のスタイル：position: fixed と top: 0px により、ナビゲーションバーが常に画面上部に固定されます。また、transition: 0.5s を指定することで、位置が変化する際に0.5秒かけて滑らかにアニメーションします。
  • スクロールの検出：window.onscroll イベントに関数 scrollShowNav を登録し、スクロールのたびに処理が実行されるようにしています。
  • 表示の切り替え：scrollTop の値が20pxより大きい場合（＝下にスクロールした場合）は、navの top を -50px に設定して画面の外へ退避させます。スクロールが上部に戻れば、top を 0px に戻してナビゲーションバーを再表示します。

実行結果

上記のコードをブラウザで開くと、次のようにナビゲーションバーが画面上部に固定表示されます。

CSSとJavaScriptでスクロール時にナビゲーションメニューを非表示にする方法

ページを下にスクロールすると、ナビゲーションバーが画面の上方向へスライドして非表示になります。

CSSとJavaScriptでスクロール時にナビゲーションメニューを非表示にする方法

このように、わずかなCSSとJavaScriptの組み合わせだけで、スクロールに連動したナビゲーションバーの自動表示・非表示を実現できます。コンテンツを大きく見せたいランディングページやブログなどで、ぜひ活用してみてください。

  1. CSSとJavaScriptでスクロール時に固定されるスティッキーヘッダーを実装する方法

    CSSとJavaScriptを組み合わせることで、ページをスクロールした際にヘッダーが画面上部に固定される「スティッキーヘッダー」を簡単に実装できます。基本的な仕組みはシンプルです。JavaScriptでスクロール位置を監視し、ヘッダーの初期位置を超えたらposition: fixedのクラスを付与します。逆にスクロールが戻ったらクラスを削除して、元の位置に戻します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device

  2. CSSとJavaScriptでスクロール時にヘッダーを縮小させる方法

    CSSとJavaScriptを組み合わせることで、ページのスクロール量に応じてヘッダーのサイズを動的に変更できます。この手法は、ナビゲーションバーを画面上部に固定しながら、スクロール中はコンテンツの表示領域をできるだけ広く確保したい場合に非常に効果的です。ここでは、window.onscrollイベントとCSSのtransitionプロパティを活用し、スクロールするとヘッダーがスムーズに縮小される実装例を紹介します。実装例<!DOCTYPE html> <html> <head> <meta name="viewport" cont