追従させるためのデータを取得しよう！

どうもRyokutyaです。
今回は3.条件分岐に必要なデータを取得するについて説明していきます。

条件分岐に必要なデータを取得する

前回説明した条件分岐を実現するために必要なデータを取得していきます。
分岐条件1~分岐条件3で必要なデータは「現在のスクロール量（変動）」,「left_followの初期座標（固定）」,「フッターの座標（固定）」,「left_followの高さ」の4つです。

現在のスクロール量（変動）

var scrollAmount=window.pageYOffset;

現在のスクロール量はwindow.pageYoffsetで取得できます。
しかし、このままでは、ページを読み込んだ時のスクロール量しか取得できません。（ページをスクロールしてもスクロール量は変化しません）
サイドバーを追従させるためには、スクロール量の変化を取得しなくてはいけないので、スクロールするごとにデータを更新する必要があります。
スクロールするごとにデータを更新するにはonscrollイベントを使用します。
onscrollイベント内に記述したコードはページをスクロールするごとに実行されため、スクロールするごとにデータを更新することができます。
onscrollイベントの書き方はwindow.onscroll=function{処理}です。

window.onscroll=function(){
    var scrollAmount=window.pageYOffset;
}

onscrollイベント内でスクロール量を取得すると、画像のようにスクロールするごとにスクロール量を取得することができます。

left_followの初期座標（固定）

var leftTargetPosition=$('.left_follow').offset().top;

対象要素.offset()で要素の表示位置を取得できます。
取得できる値は画像のようにtopとleftの2種類です。
topはページの上からの距離、leftはページの左からの距離です。
対象要素.offset().topとすることで、上からの距離だけを取得できます。

left_followはhtmlでtargetクラスを付与した<div>から下（後に記述した部分）のを包括する新たな親要素のことでしたね。
このleft_followはページが読み込まれた際はデザイン時に配置した座標にあります。（初期座標）
現在のスクロール量がleft_followの初期座標の値を上回った時（下方向に越えた時）left_followが追従し、下回った時（上方向に越えた時）は追従をやめるようにする（分岐条件1）ためには、この初期座標は変動してはいけないのでonscrollイベントの外でデータを取得する必要があります。
※left_followは現在のスクロール量によっては追従しており、座標が変動しています。そのため、onscrollイベント内に記述してしまうと、スクロールするごとにデータが更新され、初期座標ではなくなってしまうためonscrollイベントの外で初期座標を取得する必要があります

フッターの座標（固定）

var footerPosition=$('footer').offset().top;

フッターの座標は、left_followの初期座標と同様にoffset()を使用して取得しています。

left_followの高さ（固定）

var leftFollowHeight=$('.left_follow').height();

対象要素.height()とすることで、対象要素の高さを取得することができます。
heightメソッドは対象の純粋な高さを取得しています。（padding,border,marginを含めていません)

条件式を書き換える

これで条件式に必要な情報を取得できたので、コードとして記述していきます。
スクロール量が変動するごとに分岐条件を試して欲しいため、onscrollイベントの内にif文を記述します。

window.onscroll=function(){
    //現在のスクロール量を取得
     var scrollAmount=window.pageYOffset;

　　//left_targetが1つもないと.topの部分でエラーがでるためif文にいれている
    if( $('.left_side').find('.left_target').length ){
        //left_followの座標
        var leftFollowPosition=$('.left_follow').offset().top;
     }

     //条件1
     if(sideTargetPosition > scrollAmount){
        //条件1の処理
     }

     //条件2
     if(sideTargetPosition < scrollAmount && footerPosition > sideFollowHeight+scrollAmount){
         //条件2の処理
      }

     //条件3
     if(footerPosition < sideFollowHeight+scrollAmount){
        //条件3の処理
      }
}

おわりに

今回で、条件式に必要な情報が取得でき、if文をつくることができました。
次回は、if文の中の処理について説明していきます。
それでは、今回はこのあたりで(^^)/