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

发布于 2024-09-03 11:27:41 字数 1279 浏览 6 评论 0原文

我使用 $(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");
                }
            });

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

我如何获取此代码来检查其在页面加载中的位置并立即应用该类？

原文

I'm using the $(window).scroll(function() to set classes on the navigation of a site.
When a section rolls into view the navigation class changes to 'current'.

$(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");
                }
            });

This works great, however it works when the window is "scrolled" into place (obviously).
If the page is refreshed then the class is removed even though the page remains at a certain section.

How would I get this code to check where it is on page load and apply the class immediately?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长途伴 2024-09-10 11:27:41

   //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");
      }
}

   //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");
      }
}

回复收藏 0 原文

~没有更多了~