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 // メニュー固定用スクリプト ?>
参考にしたサイトはこちら
