scrollTop 突然不适用于粘性菜单

Question

我在整个网站构建过程中都没有遇到任何问题。然后，在我应该发布的那一天，粘性菜单停止正常工作。菜单应该从底部开始，滚动到顶部，然后粘贴（位置：固定）。

现在，它会滚动大约 10 像素，然后跳到顶部。为什么 scrollTop 距离计算不正确？

直播网站http://adammarshalltherapy.com

这是粘性菜单的代码。我还使用 JS 将 div 的最小高度设置为窗口高度，但这里没有包含该代码。

$(function(){
    var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyRibbonTop ) {
                    $('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
                    $('#block-bcf53bf14093931c').css({display: 'block'});
            } else {
                    $('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
                    $('#block-bcf53bf14093931c').css({display: 'none'});
            }
    });
});

提前感谢您的帮助！我还不是 JS 或 jQuery 专家，所以任何关于清理的建议都将不胜感激。

注意：该站点基于 WordPress 构建，因此无冲突模式有效。

Answer 1

我认为您在设置$('big-div') 的最小高度之前正在初始化粘性菜单功能。

在页面加载时，菜单从顶部开始 54px，因此当您将 offset().top 值存储为 stickyRibbonTop 时，它存储在 54px 处。然后在您的滚动事件中，您将与此进行比较。

尝试首先在代码中设置 div 的 min-height，然后再运行相同的脚本。 stickyRibbonTop 的值应该是正确的。

请记住，每次更新 window.height() 时都需要重置 stickyRibbonTop，因此您可能应该将此粘性菜单函数设为命名函数并在 wrapper_height 函数的末尾调用它。像这样：

function stickyNav() {
    var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;

    $(window).unbind('scroll', scrollEvent);
    $(window).on('scroll', stickyRibbonTop, scrollEvent);
};

function scrollEvent(event) {
    var stickyRibbonTop = event.data;
    if ($(window).scrollTop() > stickyRibbonTop) {
        $('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
        $('#block-bcf53bf14093931c').css({ display: 'block' });
    }
    else {
        $('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
        $('#block-bcf53bf14093931c').css({ display: 'none' });
    }
};

function wrapper_height() {

    var height = $(window).height();
    var wrapperheight = height - 75;
    wrapperheight = parseInt(wrapperheight) + 'px';
    $(".bigDiv").css('min-height', wrapperheight);
    $("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);

    stickyNav();
}
$(function () {
    wrapper_height();
    $(window).bind('resize', wrapper_height);
});