スクロールしても自動で付いてくるサイドバーを作る(2ページ目)

jQueryと「Contained Sticky Scroll」プラグインをウェブサーバにアップロードできたら、次はそれらの機能を呼び出すための記述をHTMLに追記します。なお、これ以降の解説は、前ページでご紹介した2つのサンプルページのソースも併せてご参照頂く方が分かりやすいでしょう。

「Contained Sticky Scroll」の設置方法

まずは、jQuery本体のスクリプトと「Contained Sticky Scroll」プラグインのスクリプトを読み込みます。 「Contained Sticky Scroll」を利用したいページのHTMLソースのhead要素内に、以下のように2行を記述して下さい。

<script src="./ContainedStickyScroll/jquery.min.js" type="text/javascript"></script>
<script src="./ContainedStickyScroll/jquery-contained-sticky-scroll.js" type="text/javascript"></script>

上記のHTMLソースは、「ContainedStickyScroll」というフォルダ(ディレクトリ)に両ファイルが入っている場合の記述例です。実際にアップロードした場所に合わせて修正して下さい。

上記の2行に続けて、さらに、サイドバーを構成している要素に付加した「id名」または「class名」を加えて以下の5行を記述します。下記は、「sidebar」というid名を付加した要素がサイドバーである場合の例です。

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

もし、「sidebar」というclass名を対象にしたい場合は以下のように記述します。

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

以上で、準備は完了です。

「Contained Sticky Scroll」を使うサイドバーの記述方法

スクロールに追随させたいサイドバーを構成する要素には、先ほどのスクリプト内で指定した「id名」または「class名」を付けます。例えば、サイドバーをdiv要素で作っており、id名として「sidebar」を付けた場合は、以下のようになります。

<div id="sidebar">

ページ内の段組構造は自分で作成する必要があります。例えば、以下のような感じです。段組は2段組以上であれば、何段であっても構いません。

<div class="container">
   <div id="sidebar">
      <p>サイドバー</p>
   </div>
   <div class="main">
      <p>メイン側</p>
   </div>
</div>

上記のようなHTMLソースで、「id="sidebar"」を加えたdiv要素の部分(サイドバー)が、スクロールに自動追随するようになります。段組構造が作られていれば、HTMLソースは上記の通りでなくても問題ありません。

簡単な2段組を作るHTML・CSSソースについては、冒頭でもご紹介したサンプルページ1のソースもご参照下さい。

さて、「Contained Sticky Scroll」には、いくつかのオプションが用意されています。冒頭のサンプル2でご紹介したように、アニメーションをせずにスクロールと同時に自動追随するようにもできます。オプションについて詳しくは、次のページでご紹介いたします。