「ステップ1○○」「ステップ2○○」というように
作業の流れを説明するページを作っています。
そこに設置しているページ内リンクのナビゲーションで
現在位置をハイライトしたいと思っています。
http://begoingto.jp/demo/scroll_menu/
こちらの記事を参考にスクリプトを追加したところ、
動き自体は希望通りになりました。
参考サイトと違う点としては、
ナビゲーションのリンクを画像にしているため、
通常時は「step1_off.gif」を表示していて、
ステップ1の位置を超えると「step1_on.gif」を表示する、
といった動きにしています。
この画像切り替えの処理をステップ毎に記述しているのですが、
もっとスマートにやる方法があると思います。
ですが、如何せん素人なもので、どのようにすれば良いかわかりません。
※コードは一番下に記述しています。
画像を差し替える部分について、
正規表現を使って処理するような
やり方をご教示いただけるとありがたいです。
よろしくお願いいたします。
Javascript
1<script> 2$(function() { 3 4 var stepMenu = function() { 5 var array = { 6 '#step1': 0, 7 '#step2': 0, 8 '#step3': 0 9 }; 10 11 var $globalNavi = new Array(); 12 13 // 各要素のスクロール値を保存 14 for (var key in array) { 15 if ($(key).offset()) { 16 array[key] = $(key).offset().top - 10; 17 $globalNavi[key] = $('.step li a[href="' +key+ '"]'); 18 } 19 } 20 21 // スクロールイベントで判定 22 $(window).scroll(function () { 23 for (var key in array) { 24 if ($(window).scrollTop() > array[key] - 100) { 25 26 $('.step li a').each(function() { 27 $(this).removeClass('current'); 28 $('.step li img[src="img/step1_on.gif"]').attr('src','img/step1_off.gif'); 29 $('.step li img[src="img/step2_on.gif"]').attr('src','img/step2_off.gif'); 30 $('.step li img[src="img/step3_on.gif"]').attr('src','img/step3_off.gif'); 31 }); 32 $globalNavi[key].addClass('current'); 33 $('.step .current img[src="img/step1_off.gif"]').attr('src','img/step1_on.gif'); 34 $('.step .current img[src="img/step2_off.gif"]').attr('src','img/step2_on.gif'); 35 $('.step .current img[src="img/step3_off.gif"]').attr('src','img/step3_on.gif'); 36 } 37 } 38 }); 39 } 40 41 // 実行 42 stepMenu(); 43}); 44</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/24 08:48