プログラミング独学day55の学習で、得たことや気づきを教えて！
今日は
・【jQuery】メニューのハイライトでJavaScriptのfor文を習う
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！
→プログラミング学習day55、もりけん塾day11
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
【jQuery】メニューのハイライトでJavaScriptのfor文を習う
あいかわらず、「jQuery標準デザイン講座」進めております。
→頻出のjQueryサンプル30個が制作できる本、めっちゃおすすめです。
初心者にはハンズオン形式が吉ですね。(ガッツリ教科書タイプは多分寝る
さて、今日は本の中の26個目「メニューにハイライトをつける」です。
JavaScriptのfor文が出てきたので、全力でアウトプットしていきます！
(JSより先にjQueryやってるから、わからないんや…)
完成物
少し見にくいですが、スクロールに合わせてnavのmenuにハイライトがつきます。
構成
先に、jQueryの構成を考えていきます。
①画面をスクロールする
②ナビゲーションをハイライトする
構成はシンプルですね。
→scroll()、scrollTop()、offset()、addClass()、removeClass()を使うのかな？と想像しました
ちなみにCSSはこんな感じ
headerにposition:fixedをつけて、スクロールしてもheaderは上部に固定されるようになっています。
実際にメニューのハイライト作っていきます
構成に沿って作っていきます。
構成① 画面をスクロールする
まずは、セレクタ$(window)にscroll()メソッドで関数を書いていきます。
→windowには” ”はつけない
構成② ナビゲーションをハイライトする
ナビゲーションをハイライトするには、mainコンテンツ(section1〜4)の
・そのsectionにくるまでのスクロール量
・$("section").offset().top
・$(window).scrollTop()
たとえば、section2にハイライトをつける時は？
「画面Topからsection2までの距離 < スクロールの量」
の時、section2にハイライトがつきます。
「section2までスクロールがきたとき」とも言い換えられますね。
$(セクション２).offset().top < $(window).scrollTop()
↓
このセレクタを、section1〜4まで対応できるようにしていきます！
ここで登場するのが、for文です！！
先ほど考えた「ハイライトをつける条件」を各セクションにくり返し使っていきます。
for文を使ってみよう！
→条件の範囲で、処理をくり返しておこなう
for(初期値; 条件; 値の増減){実行したい処理}
今回の場合は、
for(var i = 1; i <= 4; i++){}と書くことができます。
【解説】
var i =1; は、初期値は1（section1からだよ〜）
i <= 4; は、変数iが4以下（section4まであるよ〜）
i++ は、変数iは1ずつ増える（section1.2.3.4）
この条件のとき、指定された処理を繰り返すよ〜と言ってます。
section4になるまで、くり返されるわけです。
→実際のコード
{ }内の実行したい処理に、先ほどのsectionまでの距離とスクロール量の比較を書いていきます。
セレクタは、nth-childと変数iを使えば、全てのsectionに対応できます。
＊nth-childについては、過去記事をどうぞ↓
「各要素のn番目に処理をする」メソッドのこと。
これらをif文にするところで、条件に満たしたときにハイライト（.currentクラスに指定あり）のつけ外しを指示できます。
if文以降の処理は、
これでメニューのハイライトが完成です。
あとがき
もりけんさんのHPはこちら
