Javascript 如何根据页面上的滚动位置设置片段标识符

我希望在用户滚动时更新url上的片段标识符，以便它与屏幕顶部的元素匹配

---

有办法吗？

我想这就是你想要的：

HTML:

<<
<<

<
JavaScript（依赖jQuery）：

$（函数（）{
变量$sections=$（“.section”），
topArrays={}；
$sections.每个（功能（i，ele）{
变量$section=$sections.eq（i），
secTop=$section.offset（）.top；
topArrays[secTop]=$section.attr（“id”）；
});
$（文档，窗口）。滚动（功能（e）{
变量$ele=$（e.currentTarget），
currentTop=$ele.scrollTop（），
currentHash、arrayHash、topDiff；
for（顶级阵列中的变量i）{
arrayHash=topArrays[i]；
topDiff=当前Top-i；
currentHash=document.location.hash；
//无法滚动到没有任何偏移的部分
if（topDiff>0&&topDiff<100&¤tHash！=arrayHash）{
document.location.hash=arrayHash；
}
}
});
});

但这里有一些问题：

如果您使用的是图像延迟加载，它将无法工作

代码的性能不是很高

history.pushState比将值赋给location.hash更好，但并非所有浏览器都支持它

---

如果有人有更好的解决方案，我将不胜感激，因为我已经考虑了很长时间。

请参阅（这不是一个完全重复的问题，因为该问题允许jQuery，并且还想更新菜单项，但肯定是一个近乎重复的问题）如果调整窗口大小会发生什么情况？@zcaudate如果您使用响应式设计或以百分比/em作为宽度值，则会导致问题。在这种情况下，您应该侦听窗口的“调整大小”，并在触发“调整大小”时更新位置的TopArray和哈希。

<div id="section-1" class="section">section-1 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id="section-2" class="section">section-2 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id="section-3" class="section">section-3 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id="section-4" class="section">section-4 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>

$(function() {
    var $secitions = $(".section"),
        topArrays = {};

    $secitions.each(function(i, ele) {
        var $section = $secitions.eq(i),
            secTop = $section.offset().top;
        topArrays[secTop] = $section.attr("id");
    });

    $(document,window).scroll(function(e) {
        var $ele = $(e.currentTarget),
            currentTop = $ele.scrollTop(),
            currentHash, arrayHash, topDiff;

        for(var i in topArrays) {
            arrayHash = topArrays[i];
            topDiff = currentTop - i;
            currentHash = document.location.hash;
            //It's impossable to scroll to the section without any offset
            if(topDiff > 0 && topDiff < 100 && currentHash != arrayHash) {
                document.location.hash = arrayHash;
            }
        }
    });
});