PC ページでページをスクロールしても常にヘッダー メニューが表示されるように修正しました。
AFFINGER5 はスマホサイトはテーマのカスタマイズでメニューを常に表示することができますが、PC版サイトはそれができないため、コードを修正して実現しました。AFFINGER5 のヘッダーは id="#gazou-wide" と定義されているので、下記サイトを参考に子テーマのファイル群に以下を追加しました。
1 2 3 4 5 6 7 8 9 | /*--------------------------------スクロール時メニュー固定---------------------------------*/.fixed { position: fixed; top: 0; width: 100%; z-index: 1000;} |
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> |
1 | <script type='text/javascript' src='<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/js/wf-fixednavi.js'></script><?php // メニュー固定用スクリプト ?> |
参考にしたサイトはこちら