Question

我有以下问题。我想要的是当用户点击导航栏中的＆＃34; Contact＆＃34;它将链接到联系页面。这是一个单页面。当您联系然后单击页面底部时，例如＆＃34; Over ons＆＃34;它应该重定向到主页（单页）并停在该部分。这是有效的，但当你来自另一个页面时，当前部分与标题重叠。

只有在index.html内导航时，jQuery代码才会使用标题的偏移量。

有没有办法解决问题，所以该部分不会被标题重叠？

实例：

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').fadeIn(500, CheckHash);

很难对此进行测试，但希望对您有所帮助。

P.S。

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

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

当来自另一页时，该部分将与标题重叠

1 个答案: