單頁導航問題 - 更新/突出顯示活動狀態並滾動到錨點

Question

我已經忙於單頁導航了。 您將在下面找到有關問題和我的願望的更多信息。

它應該如何工作？

單擊導航項后，滾動到其特定部分並更新菜單的活動類。 如果頁面滾動到其特定部分，它也應該更新活動狀態 - 因此將類更改為其特定錨。

固定標題

對於網站我也使用了固定的標題，所以這不應該覆蓋特定的部分。 因此，當標題的底部到達該部分的頂部時，菜單應該停止滾動。

可變部分

單頁設計上的所有部分都有不同的高度。

問題

我已經嘗試了很多代碼，以使其工作。 大多數代碼都有效，但並非所有瀏覽器都相同。 此外，我在更新特定部分的活動狀態時遇到了一些麻煩 - 與活動錨點匹配。

碼

我用jQuery創建了一個平滑的滾動錨點。 你可以在JSfiddle看到我的工作代碼 。

以下是所有資源：

JS

在這里我控制了導航的點擊功能。 因此，當用戶單擊#primary-navwrapper的列表項時，然后更改活動狀態類並滾動到與所單擊的錨匹配的特定部分。

$('#primary-navwrapper li').find('a[href^="#"]').click(function(event) { 
    // Prevent from default action to intitiate
    event.preventDefault();


    $('#primary-navwrapper li a').removeClass("current");
    $(this).addClass("current");


    // The id of the section we want to go to.
    var anchorId = $(this).attr("href");

    // Our scroll target : the top position of the
    // section that has the id referenced by our href.
    var target = $(anchorId).offset().top - offset;
    //console.log(target);


    $('html, body').animate({ scrollTop: target }, 500, function () {
        //window.location.hash = '!' + id;
        window.location.hash = anchorId;        
    });


});

除了單擊功能，我還希望當用戶滾動一頁時，它會自動更新活動語句。

function setActiveListElements(event){
    // Get the offset of the window from the top of page
    var windowPos = $(window).scrollTop();

    $('#primary-navwrapper li a[href^="#"]').each(function() { 
        var anchorId = $(this);
        var target = $(anchorId.attr("href"));

        if (target.length > 0) {
            if (target.position().top <= windowPos && target.position().top + target.height() > windowPos) {
                $('#primary-navwrapper li a').removeClass("current");
                anchorId.addClass("current");
            }
        }
    });
}

$(window).scroll(function() {
    setActiveListElements();
});

在上面的代碼中，我認為if (target.position().top <= windowPos && target.position().top + target.height() > windowPos)的行不正確，可能很長..

如果有任何問題或其他問題，我想聽聽您的意見。 卡斯帕

Answer 1

看看你的代碼，我已經更新了你說的以下一行：

if (target.position().top - $('#header').outerHeight() <= windowPos) {
    $('#primary-navwrapper li a').removeClass("current");
    anchorId.addClass("current");
}

通過這種方式，它將使目標與頂部的差異減去標題的高度（因為它將始終可見），然后檢查窗口的位置。 如果它較差，則用戶已通過此錨點，因此菜單中的對應鏈接將突出顯示。

並且你的第一個鏈接沒有它的小提琴，所以：

<li><a href="#hero" class="current">Home</a></li>

在這些變化之后，一切似乎都很好。

JSFiddle： http ： //jsfiddle.net/8n06pvy9/17/

編輯：
為了更新哈希，我試圖使用一個簡單的window.location.hash = anchorId; ，但它導致FF和IE中的一些奇怪的滾動問題。 我花了一些時間，但我無法弄清楚會發生什么。

所以，我建議使用#!已經使用過的技巧#! 在哈希。 通過這種方式，您的代碼將是這樣的：

window.location.hash = '#!' + anchorId.replace('#', '');

在滾動功能中，像這樣：

window.location.hash = '#!' + anchorId.attr('href').replace('#', '');

JSFiddle： http ： //jsfiddle.net/8n06pvy9/18/

並且，如果需要，可以檢查頁面加載中的哈希值，刪除感嘆號並將頁面滾動到所需的錨點。 或者，如果你想避免所有這些，你總是可以使用一些歷史插件，就像這個 。 在你的情況下，我個人不會使用插件，但如果值得與否，這是你的電話。

希望能幫助到你！