粘菜單將無法正常工作

用下面的JS：

$(document).ready(function(){ 
     $(window).bind('scroll', function() { 
     var navHeight = $(window).height() - 70; 
      if ($(window).scrollTop() > navHeight) { 
       $('.menu-2-section').addClass('smallheader'); 
      } 
      else { 
       $('.menu-2-section').removeClass('smallheader'); 
      } 
     }); 
    });

在CSS我會有那麼：

.smallheader {position: fixed; top: 0; z-index:150;}

我必須有錯誤的代碼，但什麼？

請，我需要一些幫助;-)

謝謝！

來源

2016-10-27 Patrick Smits

在.smallmenu的z-index您所提供的代碼的代碼不同在'模板.js'文件。在現場，你使用'$（'＃body'）。addClass（'smallheader'）;'所以你不能滾動到頁面的底部。你的'template.js'也相當混亂。該文件的頂部已經包含'jQuery（function（$）{'，所以絕對不需要在該文件的其他地方使用'$（document）.ready（function（）{' – Lodder

）。您提供的代碼與網站中的不一樣，因爲我試圖讓自己正確地做到這一點。我想實現以下目標：當我滾動菜單（class .menu-2-section）時，菜單必須變得粘到頂部，明顯的代碼是不正確的，你能幫我嗎？ –

你寫的代碼是好的，並且運行良好。請注意，您需要添加'smallheader'類到您想要進行靜態/固定位置的對象，在您的情況下它應該是.menu-2-section

但是現在，您看不到菜單，因爲它被#top div隱藏。

#top { 
    background-color: #eda99d; 
    margin: 0 auto; 
    padding: 15px 0; 
    width: 100%; 
    z-index: 999; 
}

你需要改變這裏的z-index至小於150，或改爲大於999

來源

2016-11-02 12:12:13

謝謝，Arek。這就解決了我的問題。下一次檢查z-index的順序是一個難題！ –

粘菜單將無法正常工作

回答

相關問題