Sticky Sidebarのオプション指定

Sticky Sdebarは、ページのスクロールに合わせて自動的についてくるサイドバーを実装するためのプラグインです。
先日納品した案件でこれを使ったのですが、設置方法でちょっと迷ったところがあったので、設定方法を書いておきます。

基本の実装方法

スクリプトをダウンロードします。

Spoiled Milk | Sticky Sidebar [Demo]

jQueryとプラグインを読み込む

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/stickySidebar.js"></script>

ダウンロードするとサンプルHTMLとCSSが入っているのですが、このCSSは読み込まなくても動作します。

要素の指定を記述する

<script type="text/javascript">
$(document).ready(function() {
$('#sidebar').stickySidebar();
});
</script>

#sidebarの部分が、スクロールに追従させたい要素名になります。

オプションの設定

固定したい要素の余白などを指定できます。 設定項目は以下の通り。

  • headerSelector … ヘッダー要素を指定
  • navSelector … ナビゲーション要素を指定
  • contentSelector … コンテンツ部分の要素を指定
  • footerSelector …フッター要素を指定
  • sidebarTopMargin …サイドバーとナビゲーション要素の間の余白を指定(デフォルトでは20px)
  • footerThreshold … フッターからの距離を指定(デフォルトでは40px)

例)

$('#sidebar').stickySidebar({
sidebarTopMargin: 20,
footerThreshold: 100
});

うまく動作しない場合

上で「CSSファイルを読み込まなくても良い」と書いたのですが、私が作ったデザインの場合、ナビゲーションがサイドバー部分にあったせいか、追加の記述をする必要がありました。

Sticky Sidebarの設定

もしかしたら、このプラグインは、標準ではこういった↑ヘッダーに水平のナビゲーションがあるものを想定しているのかもしれません。

headerSelectorを指定する

要素の配置が変則的(?)になっている場合は、上に書いたオプション項目のうち、”headerSelector” を指定します。

例)

$('#sidebar').stickySidebar({
headerSelector: "#header",
footerThreshold: 100
});

ここで指定した要素がページの中で蓋というかスクロールの上限にあたる要素になります。

CSSを追記する

#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}

と追記します。ID名はHTMLに合わせてください。

色々な設定方法のブログ記事を読んでも、CSSファイルについて触れているところがあまりなかったのですが、どうしても動かない場合はこれが抜けてないか疑った方が良さそうです。

コメントを残す