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

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

• デモ : Sidebar Scroll
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

上のサンプルの説明。

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

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

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

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

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

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