【jQuery】スクロール時に現れて上部に固定されて追従するナビゲーション

どうも、ジョージです。

今日は、スクロールした時に表示されて

上部に固定されてついてくるナビゲーションのご紹介です。

jQueryの準備

今回はjQueryを使って実装するので

まずは、jQueryを読み込ませます。

htmlファイルに記述します。

<script src="js/jquery-3.4.1.min.js"></script>

上の記述はjsフォルダにjQueryファイルが入っているという記述です。

これでファイルの準備はできましたので

他の記述をしていきます。

HTML、CSS、jQueryの記述
それではHTML、CSS、jQueryを記述していきます。

HTMLはこちらになります。

<nav class="menu">
    <ul>
        <li>
            <a href="#">メニュー1</a>
        </li>
        <li>
            <a href="#">メニュー2</a>
        </li>
        <li>
            <a href="#">メニュー3</a>
        </li>
        <li>
            <a href="#">メニュー4</a>
        </li>
        <li>
            <a href="#">メニュー5</a>
        </li>
    </ul>
</nav>

menuクラスのついたnavタグの中にulタグを

ulタグの中にliタグを内包しています。

よくあるナビゲーションの記述ですね。

CSSはこちらになります。

.menu {
    position: fixed;
    top: -100px;
    right: 0;
    z-index: 9999;
    width: 100%;
    background-color: #000;
    display: block;
    transition: .8s;
}

.menu ul {
    padding: 20px 0;
    display: flex;
}

.menu ul li{
    width: 20%;
    text-align: center;
}

.menu ul li a {
    color: #fff;
    font-size: 14px;
}

menuクラスはposition:fixed;で固定してあります。

topを-100pxにしている所がポイントで

これでメニュー全体が隠れるようにしています。

jQueryはこちらになります。

$(function () {
    $(window).on("scroll", function () {
        if ($(this).scrollTop() > 300) {
            $(".menu").css('top','0');
        } else {
            $(".menu").css('top','-100px');
        }
    });
});

ページが300pxスクロールされると

cssのtopプロパティの値が0になるようにしています。

CSSでmenuクラスにtransitionプロパティを設定しているので

メニューがニュルッとでてくるようになっています。

この記述のサンプルページがこちらになります。