小粋空間  -  a cheap joke and a play on words site

jQueryでサイドメニューに現在のセクション要素を表示する「DisplaySectionプラグイン」

jQueryでサイドメニューに現在のセクション要素を表示する「DisplaySectionプラグイン」を公開します。

ちなみにこのプラグインを使わなくてもBootStrapのScrollSpyというものが用意されていますが、とりあえず自作してみました。

１．サンプル

サンプルを用意しました。

サンプル

サンプルをスクロールすると、通過するsection要素に対応するサイドメニューの該当項目を反転表示します。

２．プラグインのダウンロード

下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displaysection.js」にリネームしてください。

jquery.displaysection_0.0.1.js

以下、設定方法です。

３．HTML

反転表示させたいサイドメニューを次のように記述します。

<ul>
    <li><a href="#aaa">AAA</a></li>
    <li><a href="#bbb">BBB</a></li>
    <li><a href="#ccc">CCC</a></li>
    <li><a href="#ddd">DDD</a></li>
    <li><a href="#eee">EEE</a></li>
    <li><a href="#fff">FFF</a></li>
</ul>

次に本文のsection要素を用意します。

<section id="aaa">...</section>
<section id="bbb">...</section>
<section id="ccc">...</section>
    :
<section id="fff">...</section>

section要素のid属性値とa要素のhref属性値が対応するようにしてください。

４．JavaScript

JavaScriptは次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.displaySection.js"></script>
<script>
jQuery(function() {
    jQuery('#foo').displaySection();
});
</script>

見出し要素を含む親要素に対してdisplaySection()を実行します。

５．オプション

displaySection()を実行時のオプションとして下記を用意しています。

• target：ターゲットにしたいコンテンツの親要素。デフォルトは「section」
• margin：要素間のマージン。値を増加させると、リンクの表示が切り替わる空白期間が少なくなります。デフォルトは「90」

オプションは次のように設定してください。

jQuery(function() {
    jQuery('#foo').displaySection({
        target: '#foo',
        margin: 100
    });
});

６．CSS

表示させるサイドメニューに対し、CSSを適宜設定してください。

ul {
  position: fixed;
  top:150px;
  left:20px;
}