スクロールアップ時にナビゲーションバーをゆっくり表示する方法

Posted on by

今回は、ページをスクロールアップしたときにナビゲーションバーが
ゆっくり表示される方法について解説します。
ページを下にスクロールしているときはナビゲーションバーが隠れ、
上にスクロールするときだけナビゲーションバーが表示されるようにします。
これは、ユーザーエクスペリエンスを向上させるための素晴らしい方法です。

必要なファイル

  1. HTML
  2. CSS
  3. jQuery

では、早速始めましょう！

HTMLの準備

まず、基本的なHTMLを用意します。
ナビゲーションバーとコンテンツを含むシンプルなレイアウトです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロールナビゲーション</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="navbar" id="navbar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
    <div class="content">
        <h1 id="home">Home Section</h1>
        <p>ここにコンテンツが入ります...</p>
        <h1 id="services">Services Section</h1>
        <p>ここにコンテンツが入ります...</p>
        <h1 id="contact">Contact Section</h1>
        <p>ここにコンテンツが入ります...</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSSの準備

次に、スタイルを設定します。
ナビゲーションバーはデフォルトで隠れています。

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.navbar {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    z-index: 1000;
}

.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    display: inline-block;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.content {
    padding: 100px;
    height: 2000px; /* コンテンツの長さをシミュレートするための高さ */
}

jQueryの準備

最後に、jQueryを使ってナビゲーションバーの表示と非表示を制御します。
ユーザーがスクロールアップするときにナビゲーションバーがゆっくり表示されるようにします。

$(document).ready(function() {
    var navbar = $("#navbar");
    var lastScrollTop = 0;

    $(window).scroll(function() {
        var currentScrollTop = $(this).scrollTop();

        if (currentScrollTop < lastScrollTop) {
            // スクロールアップ
            navbar.stop(true, true).slideDown(1000); // 1秒かけて表示
        } else {
            // スクロールダウン
            navbar.stop(true, true).slideUp(1000); // 1秒かけて隠す
        }
        
        lastScrollTop = currentScrollTop;
    });
});

まとめ

以上で、スクロールアップ時にナビゲーションバーが
ゆっくり表示される機能を実装する方法の説明を終わります。
このスクリプトを使用することで、ユーザーがページを上に
スクロールする時にだけナビゲーションバーが表示されるようになります。

この方法を試してみて、あなたのウェブサイトのユーザーエクスペリエンスを向上させてください。
何か質問があれば、コメント欄で教えてください！