javascript - scrollTop 突然不适用于粘性菜单

Question

我在整个网站构建过程中都没有出现任何问题。然后，在我应该启动的那天，粘性菜单停止了正常工作。菜单应该从底部开始，滚动到顶部，然后粘贴(位置:固定)。

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

实时站点位于[站点不再存在]

这是粘性菜单的代码。我还使用 JS 将 div 的 min-height 设置为窗口高度，但此处未包含该代码。

$(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') 的最小高度之前正在初始化粘性菜单功能。

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

尝试首先在代码中设置 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);
});