スクロールしてもメニューが常に表示される方法

ホーム > ブログカスタマイズ > JavaScript > スクロールしてもメニューが常に表示される方法

スクロールしてもメニューが常に表示される方法

2014.09.26

ページをスクロールした際に、サイドメニューの一部が常に表示されるように固定してみた

前回の記事で導入した「ページ内の目次」を、スクロールしても常に表示されるように「CSS」と「jQuery」で表示位置の固定をしてみた。
これで縦長のページでも常に「ページ内の目次」が表示されるので、ページの構成も分かり易く、目次のトップや各見出しの位置に簡単に移動が可能で結構便利
また、ちょこっとソースをいじれば横スクロールにも対応可能。

今回は下記のページを参考にさせて頂きました。（参考と言うかそのままコピペで完了...ｗ）
「CSS と jQuery を使用してメニューの表示位置を固定する / Lowaivill Tech Blog 」

メニューの表示位置を固定する方法

1.HTMLへの記述

まず、HTMLで表示を固定したい箇所を「id="fixedbox"」が付いた要素で囲います。
このブログの場合、サイドメニューはFC2ブログのプラグイン1～3を利用しており、その内プラグイン3だけをスクロールしても表示位置が固定されるように以下のようにテンプレートのHTMLに記述しました。

<div id="fixedbox">
<!--permanent_area-->
<!--plugin_third-->
<div class="section"><!-- plug-in-section -->
<div class="sidetitle">
<h3 style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
</div>
<div class="side-space">
<div style="text-align:<%plugin_third_ialign>">
<!-- plug-in-align --><%plugin_third_description><!-- /plug-in-align -->
</div>
<%plugin_third_content>
<div style="text-align:<%plugin_third_ialign>">
<!-- plug-in-align --><%plugin_third_description2><!-- /plug-in-align -->
</div>
</div>
</div><!-- /plug-in-section -->
<!--/plugin_third-->
<!--/permanent_area-->
</div>

※1行目の「<div id="fixedbox">」と20行目の「</div>」をテンプレートのHTMLに追加して、プラグイン3を「id="fixedbox"」で囲ってます。

※2行目の「」と19行目の「」はプラグイン3の内容が記事ページだけで表示されるようにしてます。（今回の場合、記事ページの目次を表示してる為）

このページのトップへ

2.CSSへの記述

次にCSSの記述を「テンプレートの設定」から、スタイルシート編集内に以下のように記述
※HTMLに続き、CSSもちょっとだけ書き足せばOK♪

.fixed{
position: fixed;
top: 0px;
left: 0px
z-index: 9999;
}

このページのトップへ

3.JavaScriptの記述

最後に、head要素内（<head> ～ </head>の間）に下記のJavaScriptを記述します。

<script>
$(function(){
    var box    = $('#fixedbox');
    var boxTop = box.offset().top;
    $(window).scroll(function () {
        if($(window).scrollTop() >= boxTop - 30) {
            box.addClass('fixed');
        } else {
            box.removeClass('fixed');
        }
    });
});
</script>

以上、これだけの手順でスクロールした時にサイドメニューの一部が常に表示されるように設定完了
各記述の詳しい説明や、横スクロールで表示を固定させたい場合は、下記のページをご確認下さい。
「CSS と jQuery を使用してメニューの表示位置を固定する / Lowaivill Tech Blog 」

ブログランキングに参加中♪
良かったらポチっとお願いします