scrollTop突然不适用于粘性菜单

Question

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

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

实时网站： http：//adammarshalltherapy.com

这是粘性菜单的代码。 我还使用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')的最小高度之前正在初始化粘性菜单功能。

在网页加载时，菜单开始于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);
});