当来自另一个页面时，部分将被 header 重叠

Question

我有以下问题。我想要的是当用户在 "Contact" 上的导航栏中单击时，它将 link 到联系页面。这是单页。当您正在联系然后单击页面底部时，例如 "Over ons" 它应该被重定向到主页（单页）并停在该部分。这行得通，但是当您来自另一个页面时，当前部分会被 header 重叠。

jQuery 代码不会使用 header 的偏移量，仅当您在 index.html 内导航时才会使用。

有没有办法解决此问题，使该部分不会与 header 重叠？

实例：

http://codepen.io/anon/pen/NqxxQd

jQuery代码：

// An offset to push the content down from the top
    var offset = $('#header').outerHeight();

    $('#primary-navwrapper li:not(.prev-page, .next-page), .list-of-links li').find('a[href^="#"]').click(function(event) { 
        event.preventDefault();


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

        var anchorId = $(this).attr("href");
        var target = $(anchorId).offset().top - offset;         


        $('html, body').animate({ scrollTop: target }, 500, function () {
            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"));

            var offsetTop = target.position().top - offset;

            if (target.length > 0) {

                if (target.position().top - offset <= windowPos && (target.position().top + target.height() + offset ) > windowPos) {

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

        });

    }

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

Answer 1

向下滚动到每个部分的代码需要放在它自己的函数中，称为 FireActiveElement 之类的合理函数。给它一个通过您的 anchorId 字符串发送的参数。然后您的点击侦听器需要调用该函数。

所以你的函数类似于：

function FireActiveElement(anchorId) {
    var target = $(anchorId).offset().top - offset;

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

那么，你可以做的是这样的：

function CheckHash() {
    if (window.location.hash) {
        FireActiveElement(window.location.hash);
    }
}

然后您需要将该函数作为回调添加到您的 body 淡入：

$('body').fadeIn(500, CheckHash);

我自己很难测试这个作品，但希望对你有所帮助。

P.S.

如果您需要在页面加载时触发更多内容，您可能需要将 fadeIn 稍微更改为类似以下内容：

$('body').fadeIn(500, function() {
    CheckHash();
    // Examples:
    SomeOtherFunction();
    FireMeOnPageLoad();
});

当来自另一个页面时，部分将被 header 重叠

Section will be overlapped by header when come from another page

html

javascript

jquery