scrollTop突然不能用於粘性菜單

Question

我有這個工作，沒有問題，整個網站的構建。然後，在我應該啓動的那一天，粘性菜單停止工作。菜單應該從底部開始，滾動到頂部，然後粘貼（位置：固定）。

現在，它滾動大約10px，然後跳轉到頂部。爲什麼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); 
});