jQuery在向下滚动页面时更改哈希(片段标识符)

Question

我正在建立一个寻呼机网站.例如.每个页面(总共5个)位于一个大页面上,主菜单固定在顶部.当您单击菜单链接时,它会将您向下滑动到该页面锚标记,并且单击的菜单项将获得"活动"CSS类.

我现在要做的是允许用户滚动自己,但仍然有菜单"活动"项和URL哈希更改.

所以我的问题基本上是如何知道用户何时向下滚动到不同的页面,以便我可以更新菜单和URL哈希(片段标识符).

谢谢

Answer 1

它可能但你的页面有一个要求(我的解决方案):

您的页面必须以div(或任何部分)与唯一ID分开(我希望您不要使用锚点<a>)

你可以使用这样的代码:

$(document).bind('scroll',function(e){
    $('section').each(function(){
        if (
           $(this).offset().top < window.pageYOffset + 10
//begins before top
        && $(this).offset().top + $(this).height() > window.pageYOffset + 10
//but ends in visible area
//+ 10 allows you to change hash before it hits the top border
        ) {
            window.location.hash = $(this).attr('id');
        }
    });
});

用这样的HTML

<section id="home">
  Home
</section>
<section id="works">
  Works
</section>
<section id="about">
  About
</section>