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

2019/8/31 (土)

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

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

style.css
1
2
3
4
5
6
7
8
9
/*--------------------------------
スクロール時メニュー固定
---------------------------------*/
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
wf-fixednavi.js
01
02
03
04
05
06
07
08
09
10
11
12
13
<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>
a-header-code.php
1
<script type='text/javascript' src='<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/js/wf-fixednavi.js'></script><?php // メニュー固定用スクリプト ?>

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

nodoame.net
 
https://nodoame.net/archives/8610
https://nodoame.net/archives/8610

関連記事

  • この記事を書いた人

羽田 康祐

伊達と酔狂でエクストリーム スポーツに挑む GIS エンジニア。 GIS、IT、趣味に関して日々の出来事で学んだ記憶を記録するためにブログを書いています。同じ問題に出会った方の参考になっていただければ幸いです。GIS を使った自己紹介はこちら

-Web
-,

:)
S