2

我试图弄清楚当用户滚动到#bx2 时如何将#pg2 的css 类更改为“活动”，当用户滚动到#bx3 时如何将#pg3 更改为“活动”等等......

<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...

我一直在尝试弄清楚如何使 jquery 为n个“.tallbigblock” div 工作，而无需手动为每个 div 编写 jquery ...希望你们能帮助我...

非常感谢！

4

2 回答 2

1

这是未经测试的，但与原始代码的唯一区别是它不是硬编码的，并且一次只允许一个框处于活动状态。

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();

    $('#navi li a').removeClass('active');

    $('.tallbigblock').each(function()
    {
        if(scrollTop > $(this).offset().top)
        {
            $('#pg'+this.id.split('x')[1]).addClass('active');

            return false; // this breaks the each loop
        }
    });
});
于 2012-07-30T11:29:10.710 回答
0

根据@summoner 发布的代码，我修改并测试了以下代码：

$(window).scroll(function() {

  var scrollTop = $(this).scrollTop();
  $(".tallbigblock").each(function() {
    if(scrollTop > $(this).offset().top)
    {
      var i = $(this).attr('id');
      var nid = "#pg" + i.replace("bx", "");
      $("#navi li a").removeClass("active").hasClass("active");
      $(nid).addClass("active");        
    }
  });
});
于 2012-07-30T15:51:22.543 回答