Question

我正在使用$(window).scroll(function()在网站导航上设置类。当某个部分滚动到视图中时，导航类将更改为“当前”。

$(window).scroll(function() {

                var top = 0;
                top = $(window).scrollTop();

                if(top < 1000){
                    $("a[href='#uk']").parent().addClass("current");
                    $("a[href='#uk']").parent().siblings().removeClass("current");
                }
                if((top >= 1000) && (top < 2000)){
                    $("a[href='#mcr']").parent().addClass("current");
                    $("a[href='#mcr']").parent().siblings().removeClass("current");
                }    
                if((top >= 2000) && (top < 3000)){      
                    $("a[href='#lpool']").parent().addClass("current");
                    $("a[href='#lpool']").parent().siblings().removeClass("current");
                }
                if((top >= 3000) && (top < 4000)){      
                    $("a[href='#bham']").parent().addClass("current");
                    $("a[href='#bham']").parent().siblings().removeClass("current");
                }
            });

这很好用，但是当窗口“滚动”到位（显然）时它可以工作。如果刷新页面，则即使页面保留在某个部分，也会删除该类。

如何让这段代码检查页面加载的位置并立即应用该类？

Answer 1

   //call it every load.. to fix your problem...
    fix();

    $(window).scroll(fix); //then bind it on window scroll..

function fix(){
     var top = 0;
     top = $(window).scrollTop();

     if(top < 1000){
          $("a[href='#uk']").parent().addClass("current");
          $("a[href='#uk']").parent().siblings().removeClass("current");
     }
     if((top >= 1000) && (top < 2000)){
          $("a[href='#mcr']").parent().addClass("current");
          $("a[href='#mcr']").parent().siblings().removeClass("current");
      }    
      if((top >= 2000) && (top < 3000)){      
          $("a[href='#lpool']").parent().addClass("current");
          $("a[href='#lpool']").parent().siblings().removeClass("current");
      }
      if((top >= 3000) && (top < 4000)){      
          $("a[href='#bham']").parent().addClass("current");
          $("a[href='#bham']").parent().siblings().removeClass("current");
      }
}

jQuery窗口滚动和位置问题中的元素

1 个答案: