画面をスクロールすると、メニューバーの表示がそのカテゴリに合わせて切り替わるような仕組みを作ってみましょう。
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
※私は現在、プログラミングスクールにてコーディングの勉強をしています。学んだことをアウトプットして知識の定着をさせつつ、同じような境遇の人の助けになればと思いこの記事を書いています。一緒に頑張りましょう！
スクロールするとメニューバーがハイライトされる
完成形はこんなかんじです
See the Pen
scroll highlight by taichi (@taichi_na)
on CodePen.
まずは画面をスクロールしてみてください。左のセクション名が書かれたメニューの色が、表示されているセクションに連動して変化します。
多くのWEBサイトで実装されている機能ですね。
まずはHTML, CSS から見ていきましょう。
左のメニューバーは position: fixed; で固定してあり、スクロールをしてもそのままついていきます。そして、<li> に current クラスが、最初は A に付いています。この current クラスを条件によって付け替えてあげることが今回のスクリプトになります。
その条件とは、画面のスクロールですね。では以下で実際に確認していきましょう。
jQuery でスクロール量を取得し条件に当てはめる
See the Pen
scroll highlight by taichi (@taichi_na)
on CodePen.
では1行ずつ確認していきましょう。
1. $(window).scroll(function(){
ブラウザをスクロールしたときに～、という一文です
2. for(var i = 1; i <= 4; i++){
for文です。条件内で繰り返し行う処理で、ここでは変数 i に 1,2,3,4 を順番に入れて {}内の処理を実行しますよ、ということになります。
3. if($(“section:nth-child(” + i + “)”).offset().top < $(window).scrollTop() + 100){
・1番目のセクション、2番目のセクション…と繰り返しトップからの位置を取得する。
・それがスクロールされた量よりも小さいかどうかを確認。
この二つをここでは確認しています。
1番目のセクション、２番目のセクション…と確認していって、条件に合った最後のものがピックアップされるということになります。
※文末の100は、少し早めに切り替えるために付け足しています。この部分を削除して動かしてみると違いがわかるとおもいます。
4. $(“nav li”).removeClass(“current”);
上のセクション選びが完了したら、とりあえず今付いている current クラスを削除します。
5. $(“nav li:nth-child(” + i + “)”).addClass(“current”);
今回ピックアップされたセクションに current クラスを付与し文字を赤に変えます。
まとめ：for文で一度に複数の要素に対して条件をあてはめました
See the Pen
scroll highlight by taichi (@taichi_na)
on CodePen.
ということで今回は以下の処理を試してみました。
・for文を使って一つずつ値を代入して、スクロール量と要素のトップからの位置を調べた。
・クラスを移動させ、ハイライト表示を移動させた。
おそらく皆さんが引っ掛かるのは、4番目まで試してすべてに当てはまったときに、4つともにクラスが付与されてしまうのでは？ という部分だと思います。
for文で繰り返し条件に合うかを確認していきましたが、その最後のものが残るので、それにクラスを付与したということになります。
お疲れさまでした！！
