Javascript jQuery在向下滚动页面时更改哈希（片段标识符）

我正在建立一个单页网站。每一页（共5页）都在一个大页面上，主菜单固定在顶部。当你点击一个菜单链接时，它会将你滑到页面锚定标签，点击的菜单项会得到一个“活动的”CSS类

我现在想做的是允许用户自己滚动，但仍然有菜单“活动”项和URL哈希更改，因为他们这样做

所以我的问题基本上是如何知道用户何时向下滚动到另一个页面，以便更新菜单和URL哈希（片段标识符）

---

感谢您正在使用jquery查找事件处理程序，您可以使用scrollTop方法找到滚动位置，然后将其与页面上的元素位置进行比较，以确定它们在页面上的位置并相应地更新。

这是可能的，但您的页面有一个要求（我的解决方案要起作用）:

您的页面必须用唯一ID以div（或任何部分）分隔（我希望您不要使用锚定

）

然后您可以使用如下代码：

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

$（文档）.bind（'scroll'，函数（e）{
$（'section'）。每个（函数（）{
如果(
$（此）.offset（）.topwindow.pageYOffset+10
//但在可见区域结束
//+10允许您在哈希到达上边框之前更改它
) {
window.location.hash=$（this.attr（'id'）；
}
});
});

像这样的html

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

家
作品
关于

对于固定高度部分的内容，我也有同样的问题，它会根据滚动条更改哈希值。不知何故，除了Chrome之外，这段代码在其他浏览器上不起作用。还要在滚动中操作DOM，那么这个事件需要很长时间才能得到进程。这里是我如何解决这个问题的示例代码

 (function () {
    // Find all  top,bottom and Hash of each sections,
    // Do this only if the section height remain the same always
    // Move this into the step() if your section height does change.
    // e.g. browser resize
    //
    var section = $.map($("section"), function (e) {
        var $e = $(e);
        var pos = $e.position();
        return {
            top: pos.top,
            bottom: pos.top + $e.height(),
            hash: $e.attr('id')
        };
    });

    //Checking scroll 
    var top = null;
    var changed = false;
    var currentHash = null;

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

        changed = newTop != top;
        if (changed) {
            top = newTop;
        }

    });

    // You wouldn't want to keep checking the scroll state as
    // it affects the browser performance when it's accessing
    // DOM and reduce your FPS (Frame per Seconds) for scrolling
    // 
    function step() {
        if (!changed) {
            // Top did not change
            return setTimeout(step, 200);
        }
        var count = section.length;
        var p;

        while (p = section[--count]) {
            if (p.top >= top || p.bottom <= top) {
                continue;
            }
            if (currentHash == p.hash) {
                break;
            }
            var scrollTop = $(document).scrollTop();
            window.location.hash = currentHash = p.hash;
            // prevent browser to scroll
            $(document).scrollTop(scrollTop);
        }
        setTimeout(step, 200);
    }
    setTimeout(step, 200);
})(); 

（函数（）{
//查找每个部分的所有顶部、底部和散列，
//仅当截面高度始终保持不变时才执行此操作
//如果截面高度确实发生变化，请将其移到步骤（）中。
//例如，调整浏览器大小
//
var section=$.map（$（“section”），函数（e）{
var$e=$（e）；
var pos=$e.position（）；
返回{
顶部：位置顶部，
底部：位置顶部+e.高度（），
散列：$e.attr（'id'））
};
});
//检查卷轴
var-top=null；
var=false；
var currentHash=null；
$（窗口）。滚动（函数（）{
var newTop=$（document.scrollTop（）；
已更改=新顶部！=顶部；
如果（更改）{
顶部=新顶部；
}
});
//您不希望继续将滚动状态检查为
//它在访问时会影响浏览器的性能
//DOM并减少滚动的FPS（每秒帧数）
// 
函数步骤（）{
如果（！已更改）{
//顶部没有改变
返回设置超时（步骤200）；
}
var计数=截面长度；
var-p；
而（p=截面[--count]）{
如果（p.top>=top | | p.bottom，请您发布“window.location.hash”部分的代码。我使用window.location.hash=$（this.attr（'href'）），但每个散列都没有定义。Thanks@suludi这些部分没有
href
但是
id
对不起，我自己也立即注意到了。但问题是它根本不允许我滚动。我无法在我正在工作的网站上滚动，但脚本太多（滚动脚本），所以我认为这可能是一个冲突。所以我创建了一个简单的干净页面，有4个部分，但仍然不允许我滚动。下面是链接，非常感谢帮助：+1，如果你想更改滚动上的哈希值，但不想保存用户历史记录中的哈希值，我发现这是可行的：
var urlId='#'+$（this.attr（'id'））；history.replaceState（null，null，urlId）；
向后滚动如何？向下滚动时效果很好，当
h1
到达顶部时，它会更改哈希值（我将部分更改为h1），但当我向上滚动时，当我传递
h1
时，哈希不会更改为上一个id，最好的最新方法是使用HTML5历史API。有关更多详细信息，请参阅。