AFFINGER6でスクロール時にメニューをＴＯＰに固定する

AFFINGER6でスクロール時にメニューをＴＯＰに固定する

追加cssのみでメニューをｔｏｐに固定できます。

@media screen and (min-width: 960px) {
#gazou-wide {
position: fixed;
z-index: 10001;
top: 0;
width: 100%;
       background-color: #568ebf;
}
body {
       padding-top: 5px;
}
}

追加cssでfunctionを記述　テーマ内のheader.phpでjavascript(js)を読み込ませる。

htmlでjavascript(JS)を実行するCSS function名 fixedとします。テーマエディタでheader.phpを修正する。head内にscriptを記述する。

CSSコード

.fixed{

position:fixed;
top:0;
width:100%;
z-index:999999;

}

<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>

追加cssでfunctionを記述　「JSコード」ヘッダー固定用をAFFNGER6用の『AFFINGER管理画面』で追加する

『AFFINGER管理＞その他＞コード出力＞headに出力するコード』を選択すると画面（コード未記入）が表示されます。

上記javascriptの貼り付けが完了したら『Save』してサイトを確認しましょう。

PAGE TOP