ページスクロール時にヘッダーメニューを固定する方法

2019/8/31 (Sat)2025/9/6 (Sat)

PC ページでページをスクロールしても常にヘッダーメニューが表示されるように修正しました。

AFFINGER5 はスマホサイトはテーマのカスタマイズでメニューを常に表示することができますが、PC版サイトはそれができないため、コードを修正して実現しました。AFFINGER5 のヘッダーは id="#gazou-wide" と定義されているので、下記サイトを参考に子テーマのファイル群に以下を追加しました。

/*--------------------------------
スクロール時メニュー固定
---------------------------------*/
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

<script>
$(function() {
    var offset = jQuery('#gazou-wide').offset();

    $(window).scroll(function () {
        if (jQuery(window).scrollTop() &gt; offset.top) {
            jQuery('#gazou-wide').addClass('fixed');
        } else {
            jQuery('#gazou-wide').removeClass('fixed');
        }
    });
});
</script>

<script type='text/javascript' src='<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/js/wf-fixednavi.js'></script><?php // メニュー固定用スクリプト ?>

URLをコピーしました！

ページ スクロール時にヘッダー メニューを固定する方法

ページスクロール時にヘッダーメニューを固定する方法