Corredor

ウェブ、プログラミングの勉強メモ。

サイドバーのスクロール制御のアイデア

Webデザイン良質見本帳  目的別に探せて、すぐに使えるアイデア集

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

とあるサイト (リンクするとアレなのでボカします) のサイドバーのスクロール制御の仕方が面白かったので、コードを調べて真似てみた。元のサイトは WordPress で作られているようだったので、WordPress のテーマにこういうモノがあるのかも。

See the Pen Sidebar Scroll by Neos21 (@Neos21) on CodePen.

  • 通常、サイドバーはメインコンテンツに追随してスクロールする。
  • サイドバーが最下部までいくと、以降のスクロールダウンは position: fixed; bottom: 0; 固定になる。
  • この状態でスクロールアップすると、またスクロールに追随する。
  • サイドバーが最上部までいくと、以降のスクロールアップは position: fixed; top: 0; 固定になる。

説明が難しいので、実際にスクロールしてサイドバーの動きを見てみてほしい。

CSS で指定しておくプロパティを、jQuery.attr() を使って上手く上書きしているのがキモ。jQuery.css() だと上手くいかないのだ。

メインコンテンツの方に position.absolute を指定してしまうと、document.body の高さが思ったようにならないので、サイドバーの方に position: absolute を使い、メインコンテンツは成り行きで表示させるようにする。

同じ処理を何度も通らないようにするため、フラグ変数を設けている。これがないとガクガクしてしまう。

ウィンドウの高さを広げたときに、サイドバーの最下部より下に余白が出来てしまう不具合がある。うまいことやれば直せそうだけど、とりあえず今回はコードを参考にするだけ。