追従する条件を考える！

どうもRyokutyaです。
前回に引き続き、「画面をスクロールすると追従するサイドバー」の説明をしていきます。
説明順
1.ターゲットを包括する新たな親<div>の生成
2.条件分岐を考える
3.条件分岐に必要なデータを取得する
今回は2.条件分岐を考えるについて説明します。

実現したいことを整理する

条件分岐を考えるために、まず実現したいことを整理します。

実現したいこと
1.スクロール量が、スタート地点（left_followの初期座標）よりも小さい時は追従しない。
2.スクロール量がleft_followの初期座標を越えたらスクロールに合わせてleft_followに追従する。
3.スクロール量が、ゴール地点（今回はフッター）に到達したら追従をやめる。

条件分岐を考える

条件分岐1

実現したいこと1の範囲を条件分岐で考えるとすると「スクロール量(値は変動する）」が「left_followの初期座標（値は固定されている）」より小さい時と表現できます。
条件分岐1：「left_followの初期座標（固定）」＞「スクロール量（変動）」
※スクロール量は下にスクロールすると増加し上にスクロールすると減少します。最上部が表示されている状態（これ以上、上にスクロールできない状態）がスクロール量0です。

条件分岐2

実現したいこと2の範囲を条件分岐で考えると「left_followの初期座標（固定）」より「スクロール量（変動）」が大きいかつ「フッターの座標（固定）」よりも「スクロール量とleft_followの高さを足した値」が小さいと表現できます。

※画像の緑のライン（スクロール量+left_followの高さ）がフッターの座標より上にありなおかつ「left_followの初期座標」より「スクロール量」が大きいということ
条件分岐2：「left_followの初期座標」<「スクロール量」&&「フッターの座標>「スクロール量+left_followの高さ」

条件分岐3

実現したいこと3を条件分岐で考えると「フッターの座標」よりも「left_followの高さ+スクロール量」大きくなった時、追従を止めたいので、
条件分岐3：「フッターの座標」<「left_followの高さ+スクロール量」
となります。

画像の緑のラインがフッターの座標を越えた時、追従を止まるようにしたい。

この3つの条件のときで「動かす処理」、「止める処理」を制御すれば追従するサイドバーの完成です。

おわりに

次回は今回考えた分岐条件をコードで記述するためのデータを取得する方法について説明していきます。
それでは、今回はこのあたりで(^^)/