jQueryでサイドバーを追従させる方法

サイドバーって画面をスクロールさせていくと最後のほうは何も表示されなくなっちゃいますよね。

せっかくスペースがあるなら常に何か表示させておきたいと思うものです。

そこで今回は画面をスクロールするとサイドバーが固定表示されるものを作ってみました。

仕様は以下の通りです。

• スクロールしたときにサイドバーが画面上部で固定表示される。
• ヘッダーが表示されているときはヘッダーと被らない。
• フッターが表示されているときはフッターと被らない。

サンプルコード

下に記載したコードは関係する部分だけを抜粋しています。

動くサンプルはこちらからどうぞ。

HTML（関係ない部分は省いてます）

CSS（関係ない部分は省いてます）

jQuery

コード解説

ちょっと縦に潰れていますが、全体の構成は上の画像のような感じです。

そしてスクロールによって3つの状態ができます。

この3つの状態で表示位置のCSSのクラスを作成します。

１つ目、初期状態です。

ヘッダーが表示されている場合は通常の状態です。

ここではCSSは1～20のちょっとしたデザインのものだけです。

２つ目が、スクロールされてヘッダーが隠れたときからフッターが見えるまでです。

このときは、CSSの22～26行目(.sidefixed)が適用されます。

position: fixed; を指定すると、スクロール関係無しで固定位置に表示させることが出来ます。

right: calc(50% – 580px); これがちょっと珍しいですが、calc() というのを使うと計算できます。

ページの表示領域の横幅が1160pxを指定して作成しているので、半分の 580px をブラウザ全体の半分50％から引いています。

例えばブラウザの横幅が2000pxだったら 50% で1000pxになるので、1000-580=420pxとなります。

420pxというのは、画面の右端からページを構成するHTMLの右端までの距離です。

つまり、縦方向は上から50px固定で、横方向は元々サイドバーが表示されている場所と同じということになります。

そして、２つ目の状態になる条件ですが、ブラウザの上端がコンテンツエリア(メインとサイドバーのエリア)の上端より50px上まで来たときです。

ブラウザの上端はスクロール値とイコールですので6行目の var scroll = $(document).scrollTop(); で取得出来ます。

コンテンツエリアの上端は、var contenttop = $(“#content”).offset().top; で取得出来ます。

50pxは、追従するときにCSSで指定した24行目のtop: 50px と同じ値です。50pxにこだわりはありません。

そしてjQueryの29行目の条件判定をして、満たされれば .sidefixed をサイドバーのクラスに追加します。

3つ目の状態は、フッターとサイドバーが被らないように、フッターが見えたときには一緒にスクロールされるようにしたものです。

position: absolute; は基準位置からの位置指定です。

基準位置は、CSSの32行目でコンテンツエリア(メインとサイドバーのエリア)に対し position: relative; を指定しています。

bottom: 50px; right: 0; なので、右下から上に50px上がったところに固定されます。

条件は、画面の上端（スクロール位置）が、フッターの上端からサイドバーの高さ分上、更にサイドバー上下の余白（100px） 分上まで来たときです。

言葉で説明するのは分かり辛いかもしれません。

jQueryの20行目の条件になります。

これでコンテンツエリアの右下に固定されて一緒にスクロールされるようになります。

最後に、jQueryのif文ですが、下にスクロールしていくと現れる状態と逆から順番に条件を指定しています。

これは、else if というのは、条件に当てはまったら他の条件の処理は行わないというものだからです。

一番優先されるものから順番に条件を書いていくことになります。

まとめ

今回のポイントは、$(document).scrollTop(); によるスクロール位置の取得。

それと、offset() によるコンテンツの表示位置の取得ですね。

ただ、ここまで作りましたが、実はCSSだけでサイドバーの追従は出来るようです。

次回はCSSだけで作ってみようと思います。