スクロールしても自動で付いてくるサイドバーを作る

サイドバーをスクロールに自動追随させる方法

段組を作ってサイドバーを設けているレイアウトでは、本編を読み進めるためにページをスクロールすると、すぐにサイドバーが見えなくなってしまう点が悩みの種になりがちです。

そんなときには、閲覧者がページをどれだけスクロールしても自動的にサイドバーが追随してきて視界から消えないようにするデザインを使ってみてはいかがでしょうか。

今回は、閲覧者がページをスクロールしても自動で付いてくるサイドバーを作る方法をご紹介いたします。

※本記事は、2013年3月19日に初版を公開し、2016年10月に改訂したものです。記事中の一部の画像や画面イメージは、2013年3月時点のものです。

jQueryプラグイン「Contained Sticky Scroll」

JavaScriptライブラリ「jQuery」と「Contained Sticky Scroll」というjQueryプラグインを使うことで、スクロールに自動で付いてくるサイドバーが簡単に作れます。かなり古いブラウザでも問題なく動作可能で、例えばIE6でも動きます。

この「Contained Sticky Scroll」を使ったシンプルな動作サンプルを2つ用意しましたので、お使いのブラウザでも試してみて下さい。

■サイドバーが自動で付いてくるサンプル1
：閲覧者がページをスクロールした際に、サイドバーが若干遅れてからアニメーションして付いてくるデフォルト設定を使用。

■サイドバーが自動で付いてくるサンプル2
：閲覧者がスクロールした瞬間にサイドバーも一緒に付いてくるオプションを使用。

それでは、(1)このjQueryプラグイン「Contained Sticky Scroll」のダウンロードと設置方法、(2)利用するためのHTMLの記述方法、(3)オプションの書き方を順にご紹介いたします。

jQueryプラグイン「Contained Sticky Scroll」のダウンロード

ダウンロードするには、「Contained Sticky Scroll」の配布サイト(下記参照)にアクセスして、ページの中程にある右図に示した大きなロゴ画像をクリックします。

※クリックするのは「ページの左上にある小さいロゴ画像」ではありませんので注意して下さい。もっと下にある大きなロゴ画像の方です。

■配布サイトは閉鎖されているが、Internet Archiveからダウンロード可能
この「Contained Sticky Scroll」を配布していたページは「Freebie: Contained Sticky Scroll jQuery Plugin」ですが、2016年現在ではウェブサイト「Echo Enduring Blog」ごと閉鎖されています(復活する可能性も考えてリンクは残しておきます)。

しかし、世界中のウェブサイトの過去バージョンを保存しているInternet Archiveサイト内にはコピーが残っているため、公式サイトが閉鎖された今でも下記のページからダウンロード可能です。

→「Freebie: Contained Sticky Scroll jQuery Plugin」(Internet Archive 2015/12/19)

公式サイトが復活している場合は公式サイトからダウンロードするのが良いですが、閉鎖されている場合には上記のページからダウンロードすると良いでしょう。なお、Internet Archive内にあるZIPファイルへの直接リンクはContainedStickyScroll.zipです。このリンクからダウンロードするのが最も手軽です。

ContainedStickyScroll.zipを展開して必要なファイルを抜き出す

ZIP形式で圧縮されたファイル「ContainedStickyScroll.zip」は、本稿執筆時点のバージョンでは36KBでした。とても軽量なので、すぐにダウンロードできます。ダウンロードできたら展開して下さい。

ZIPファイルを展開すると、以下の4つのファイルが現れます。

1. サンプルページ： index.html ,  pattern.jpg
2. jQuery本体： jquery.min.js
3. プラグイン： jquery-contained-sticky-scroll.js
4. プラグイン(短縮版)： jquery-contained-sticky-scroll-min.js

これらのうち、自サイト上にアップロードする必要があるファイルは、2と4のみです。既にjQueryを利用していてjQuery本体をアップロード済みの場合は、2は不要ですから、4だけをアップロードすれば充分です。

ウェブサイト上の適当な位置にアップロードできたら、次に「Contained Sticky Scroll」を呼び出す記述をHTMLに加えましょう。具体的な記述方法は次のページでご紹介いたします。