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

2019年11月22日2020年1月31日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>

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);
}