menu

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

H&Rブログ > JavaScript > サイドバー > 追従させるためのデータを取得しよう!

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

JavaScript




どうも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文の中の処理について説明していきます。
それでは、今回はこのあたりで(^^)/




コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ