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

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

Posted at October 3,2013 1:11 AM
Tag:[DisplaySection, jQuery, Plugin]

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

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

1.サンプル

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

サンプル
サンプル

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

2.プラグインのダウンロード

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

jquery.displaysection_0.0.1.js

以下、設定方法です。

3.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属性値が対応するようにしてください。

4.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()を実行します。

5.オプション

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

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

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

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

6.CSS

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

ul {
  position: fixed;
  top:150px;
  left:20px;
}
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)