▼やりたい事
http://blog.beat8.info/samples/13091801.html
(参照ページ)
↑ナビ(li )ではなく、表示されているコンテンツ(box)にクラスを付けたい。
▼試した事
下記ページ【navカレント表示】の箇所を参照して
http://blog.beat8.info/jquery/53/
下記書き換え
「.nav li a」→「.box」
「.nav li:nth-child」→「.box:nth-of-type」
▼結果
途中まではきちんと表示されているコンテンツに、クラスが付与されていたが
途中から表示されていないコンテンツにクラスが付与されたりと上手く動作しなかった
所々何が書いてあるのかも良くわからない状態で何が不要で何が不足しているのかさっぱり解らない状態です。。
すみませんがどなたかご教示お願いいたします。
==下記追記====================
実際に記述したソース
▼html
<div class="contentsBox"> <div class="box current">割愛</div> <div class="box">割愛</div> <div class="box">割愛</div> </div>
.boxは全部で10個あります。
▼js
$(function() { //カレント表示 var box = new Array; var current = -1; $(".contentsBox .box").each(function(i) { box[i] = $(this).offset().top; }); // カレント表示の変更 function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1; $(".contentsBox .box").removeClass("current"); $(".contentsBox .box:nth-of-type(" + secNum2 +")").addClass("current"); } } // scroll量での判定 function scrollCheck() { var st = $(window).scrollTop() + 30; for (var i = box.length - 1 ; i >= 0; i--) { if (st > box[i]) { changeBox(i); break; } }; } // scrollでのカレント表示をbind $(window).bind("load scroll", scrollCheck); });
回答4件
あなたの回答
tips
プレビュー