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);
});