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

Question

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

有没有办法做到这一点？

Answer 1

我想这就是你想要的：http://fiddle.jshell.net/hainawa/u5e2s/show/light/

HTML：

<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>

JavaScript（依赖 jQuery）：

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

但是这里有一些问题：

1. 如果您使用图像延迟加载，它将不起作用；
2. 代码的性能不是很高；
3. history.pushState 比给 location.hash 赋值要好，但并不是每个浏览器都支持它。

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