javascript - ページのスクロール位置に応じてフラグメント識別子を設定するにはどうすればよいですか

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 に値を割り当てるよりも優れていますが、すべてのブラウザーがサポートしているわけではありません。

長い間考えていたので、誰かがより良い解決策を持っていれば、私は感謝します.