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

CSSとJavaScriptを使ってスクロール時にナビゲーションバーをスライドダウン表示する方法

Webページを下にスクロールしたとき、画面上部からナビゲーションバーが滑らかにスライドダウンして表示される動きは、多くのモダンなサイトで採用されている定番のUI演出です。この記事では、CSSのposition: fixedとtransition、そしてJavaScriptのスクロールイベントを組み合わせて、このエフェクトを実装する方法を詳しく解説します。

実装のポイント

仕組みはシンプルです。ナビゲーションバーを画面上部の見えない位置（top: -50px）に固定配置しておき、ページが一定量スクロールされたらJavaScriptでtopの値を「0」に変更します。CSSのtransitionプロパティによって値の変化がアニメーション化され、自然なスライドダウン演出が実現できます。

完全なサンプルコード

以下が、スクロール時にナビゲーションバーをスライドダウン表示させる完全なコード例です。

<!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: -50px;
    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 = "0";
    } else {
        document.getElementsByTagName("nav")[0].style.top = "-50px";
    }
}
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、最初はナビゲーションバーが非表示の状態でページが読み込まれます。

CSSとJavaScriptを使ってスクロール時にナビゲーションバーをスライドダウン表示する方法

ページを下にスクロールすると、以下のようにナビゲーションバーが画面上部からスムーズにスライドダウンして現れます。スクロール位置が上部（20px以内）に戻ると、ナビゲーションバーは再び上へ隠れます。

CSSとJavaScriptを使ってスクロール時にナビゲーションバーをスライドダウン表示する方法

コードの解説

CSS側のポイント

  • position: fixed：ナビゲーションバーを常に画面に対して固定配置し、スクロールの影響を受けないようにしています。
  • top: -50px：初期状態ではナビゲーションバーを画面の上端の外側に隠しておきます。
  • transition: 0.5s：topの値が変化した際に0.5秒かけて滑らかにアニメーションさせます。

JavaScript側のポイント

  • window.onscroll：ページがスクロールされるたびにscrollShowNav関数が呼び出されます。
  • scrollTop の判定：document.body.scrollTopまたはdocument.documentElement.scrollTopが20pxを超えていればナビゲーションバーを表示し、それ以外では非表示にします。両方をチェックしているのは、ブラウザによってスクロール位置を参照するオブジェクトが異なるためです。

まとめ

わずか数十行のHTML・CSS・JavaScriptで、スクロールに連動した洗練されたナビゲーションバーのスライドダウン演出を実装できました。transitionの秒数やスクロール判定の閾値（20px）を調整すれば、サイトのデザインに合わせた微調整も簡単に行えます。ぜひ自分のプロジェクトにも取り入れてみてください。

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

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

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

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {