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

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

上のサンプルの説明。

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

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

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

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

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