【jQuery】画面スクロールで上部に固定ナビゲーションを表示するjQueryコード

【jQuery】スクロールすると上部に固定ナビゲーションを表示するjQueryコード

WEBサイトでよく使われる手法ですが、画面を少しスクロールすると上部に追従する固定メニューがフワッとフェードインで表示されるコードをjQueryで実装します。逆にスクロールで画面を一番上に戻すとメニューが非表示になります。コピペで簡単に実装できるよう解説しています。

動作DEMOページ

実際の動きを確認するための動作確認ページを用意しました。画面を少しスクロールすると上部に固定メニューが現れます。

» 動作デモページはこちら

設置方法

jQuery本体の設置

CDNで配布されているjQueryの本体を、<head>内に読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery実行コード

jQuery本体より下に、こちらのコードを設置します。

<script type="text/javascript">
$(function(){
    //表示するスクロール量(px)
    var scrollPoint = 60;
    $(window).scroll(function(){
        if($(this).scrollTop() > scrollPoint){
            $('.fixed_header').fadeIn();
        }else{
            $('.fixed_header').fadeOut();
        }
    });
});
</script>

コードの4行目では、何pxスクロールしたら固定メニューをフェードインで表示させるか指定します。var scrollPoint = 60の部分を実装するサイトに合わせて変更して下さい。

HTML

スクロールすると出現する固定メニューの要素を、クラス名.fixed_headerを付けて設置しています。こちらのクラス名はご自分の環境に合わせて適宜変更してください。

<nav class="fixed_header">
    <p>固定メニュー</p>
</nav>

CSS

.fixed_headerは初期状態では非表示にするので、display:noneを指定しています。またposition:fixedで固定するので、.fixed_headerの親要素にはposition:relativeを指定してください。

.fixed_header{
    display:none; /*初期状態:非表示にする*/
    width:100vw;
    position:fixed;
    left:0;
    top:0;
    z-index:999;
    background:rgba(255,255,255,0.8);
}

jQueryカテゴリの最新記事

コメントを残す


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください