スクロールしても固定されて追尾するサイドバー

更新日
2017.07.28
作成日
2015.07.02

スクロールしても付いてくるサイドバーを自分なりに使いやすく作ってみました。

$(document).ready() だと実行するタイミングが早くて、画像などの内容の読み込みが終わった状態の要素の縦幅を取得できない場合があるので $(window).load() を使うのがいいようです。

サイドバーの上基準に固定

  • シンプルに上固定するタイプ
  • メインコンテンツがサイドバーより短い場合は何もしない

デモページ

[ERROR] 読み込みファイルがありません

最初スクリプト側でマージンをつけていましたが、あとから弄るときに面倒臭そうだったので画面端に固定して CSS 側で調整するようにしました。

サイドバーの下を基準に固定

上固定だとサイドバーが長い時一番下までスクロールしないと見えないので下固定にしました。

  • 画面からはみ出る場合下を基準に固定、画面より小さい場合は上を基準に固定
  • 折りたたみなどで動的に長さが変わった場合あとから簡単に補正

デモページ

[ERROR] 読み込みファイルがありません

ウィンドウや要素の高さが変わった場合はそのタイミングでfixedSidebar.refresh();すると補正します。

レスポンシブにも対応させようかと思ったんですが、スマホにこの機能は必要なさそうなのでfixedSidebar.run();付近でごにょごにょ処理するぐらいでもいいかも。