ユーザーが#bx2にスクロールしたときに#pg2のcssクラスを「active」に変更し、ユーザーが#bx3にスクロールしたときに#pg3を「active」に変更する方法を理解しようとしています...
<ul id="navi" style="position:fixed;top:0">
<li><a href="#bx1" id="pg1" class="active">1</a></li>
<li><a href="#bx2" id="pg2" class="">2</a></li>
<li><a href="#bx3" id="pg3" class="">3</a></li>
...
<li><a href="#bx00" id="pg100" class="">100</a></li>
</ul>
<div class="tallbigblock" id="bx1">...</div>
<div class="tallbigblock" id="bx2">...</div>
<div class="tallbigblock" id="bx3">...</div>
...
<div class="tallbigblock" id="bx100">...</div>
これが私のjqueryです:
$( window ).scroll( function() {
var t = $( "#bx1" ).offset().top;
if( $(this).scrollTop() > t )
{
$( "#navi li a" ).removeClass( "active" ).hasClass( "active" );
$( "#pg1" ).addClass( "active" );
}
var t = $( "#bx2" ).offset().top;
if( $(this).scrollTop() > t )
{
$( "#navi li a" ).removeClass( "active" ).hasClass( "active" );
$( "#pg2" ).addClass( "active" );
}
var t = $( "#bx3" ).offset().top;
if( $(this).scrollTop() > t )
{
$( "#navi li a" ).removeClass( "active" ).hasClass( "active" );
$( "#pg3" ).addClass( "active" );
}
});
問題は、50個の「.tallbigblock」div...または動的に生成された「.tallbigblock」div...がある場合です。
私は、各divのjqueryを手動でコーディングせずに、 n個の「.tallbigblock」divに対してjqueryを機能させる方法を見つけようとしてきました...皆さんが私を助けてくれることを願っています...
本当にありがとう!!