YouTube | Facebook | Twitter  Feed

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

2019/8/31 (土)

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() > 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 // メニュー固定用スクリプト ?>

参考にしたサイトはこちら

関連記事

  • この記事を書いた人

羽田 康祐

Twitter#一日一図法を連載中。GIS上級技術者、Esri認定インストラクター、CompTIA CTT+ Classroom Trainer、潜水士、元PADIダイブマスター、四アマ。WordPress は 2.1 からのユーザーで歴だけは長い。 代表著書『地図リテラシー入門―地図の正しい読み方・描き方がわかる』 GIS を使った自己紹介はこちら。ESRIジャパン(株)所属、青山学院大学非常勤講師を兼務。発言は個人の見解です。

-Web
-,