Qiita初投稿だ~
この記事の被検体です。
スクロールしていってサイドバーが一番下までいったら固定されるアレあるじゃないですか。
それをしようと思ったら予想以上に苦しんだので、忘れないようにメモします。
#position:sticky;使えない問題
position:sticky; これ、便利なやつですね。
詳しくはこちらを読んでください。
今回これを使わなかった理由は、メインコンテンツとサイドバーをfloatで配置していたからです。
じゃあdisplay: flex;で配置したらいいじゃんって思うかもしれませんが、どうしてもfloatでの配置のままサイドバーを固定したかったのでこのままいきます。
floatしてても使えるよ！っていう方は教えてください....
なので、position:sticky;を使うのを諦めました。
#ScrollMagic使えない問題
次はこれ、ScrollMagicが使えませんでした。
使えなかったといっても、ちゃんと固定して動かすことはできましたが...
メインコンテンツ部分にあるリンクが押せない!!!!!(chrome)
See the Pen ScrollMagic by MOYORi (@moyori) on CodePen.
押せないですよね？
リンクが押せないのは、固定されたサイドバーがdisplay: block;になってメインコンテンツを覆ってしまっているからっぽいですね。
困る。
ということで、ScrollMagicも使うのを諦めました。
#jQueryで書こう
まあ、この流れならjQueryになりますよね。きっと。
そこで一番苦しんだのは、スクロールイベントが発火するたびにシュババババッて動いてカクついたことです。もうね、サイドバーご乱心ですよ。
このカクつきを止めるには、間引くべきだ。
参考にしたのはこちら
ここで言っている
It’s a very, very, bad idea to attach handlers to the window scroll event.
$( window ).scroll( function() {
// Do your thang!
});
これで書いてしまってました。そりゃあサイドバーもご乱心ですわ。
なので、setTimeout()メソッドを用いて、スクロールイベントが断続的に呼ばれないようにしました。
ずっとカクつくということは無くなったけど、ある時急にガクンッてサイドバーが動くということになってしまったのでやめました。
次に使ったのがrequestAnimationFrame()メソッドです。
こちらの記事を参考にしました。
これがうまくいきました。
そしてできたのがこれ
See the Pen スクロール固定 by MOYORi (@moyori) on CodePen.
ちゃんと動いてますかね？若干の不安アリ。
リンクも押せる！止まる！動き出す！
#最後に
なんだかんだ、これだけのことに結構時間を使いました。
ちゃんと自分の動いて欲しいように動くとほっとしますね！
サイドバーを固定するだけでも色々な書き方があるので、合ったものをサッと考えられるようになりたいな~って思いますね。
以上、サイドバー固定に苦しんだ記録でした。