menu

はとむぎ

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

H&Rブログ > JavaScript > サイドバー > 追従する条件を考える!

追従する条件を考える!

JavaScript




どうも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つの条件のときで「動かす処理」、「止める処理」を制御すれば追従するサイドバーの完成です。

おわりに

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




コメントを残す

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

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

緑茶

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

緑茶のカテゴリー

はとむぎ

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

緑茶

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

緑茶のカテゴリー

アーカイブ

はとむぎ

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

緑茶

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

緑茶のカテゴリー

アーカイブ