導航欄固定頂部用jQuery取消CSS屬性

我創建一個WordPress站點，併成功地把我的導航欄固定在頂部時，我使用此代碼向下滾動頁面：導航欄固定頂部用jQuery取消CSS屬性

(function($){ 
    var navOffset = jQuery("nav").offset().top; 
    jQuery(window).scroll(function() { 
     var scrollPos = jQuery(window).scrollTop(); 
     if(scrollPos >= navOffset) { 
      jQuery("nav").addClass("fixed"); 
     }else {   
      jQuery("nav").removeClass("fixed"); 
     }  
    });  
})(jQuery);

但現在當我點擊我在頁面上的圖標（位於產品和服務部分），彈出圖標和適用於圖標的動畫都不起作用。

當我停用這個特定的jQuery代碼時，彈出窗口工作正常。

有沒有另一種方法，我可以使導航欄固定在頂部，仍然有我的圖標工作正常？

jQuery有什麼不對嗎？ http://scentology.burnnotice.co.za/

來源

2016-08-26 Wosley Alarico

我可以知道哪些圖標？ –

@Jacob Goh。產品和服務部分的大圖標 –

您是否檢查導航欄是否具有正確的'z-index'？也許有z-index較高的項目，並且您的點擊事件未正確應用/傳播？ – Sayed

看來，你的資產淨值是覆蓋整個屏幕時，它的固定

截圖：

這是因爲你對導航

nav#site-navigation { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
}

的一個bottom: 0 CSS屬性解決方案是確保bottom: 0處於修復模式時被禁用。您可以將bottom: auto !important;添加到您的.fixed類

.fixed { 
    top: 4%; 
    width: 100%; 
    text-align: center; 
    bottom: auto !important; 
}

來源

2016-08-26 07:03:47

。我肯定需要對你的答案進行投票。我想問關於導航欄的另一個問題，或者我們是否應該採取這種方式來聊天？ –

我想你可以在這裏評論？ –

太好了。如果你刷新頁面，你會看到當你點擊每個菜單項時，它會轉到它的各個部分。好吧。但是如果你注意到，導航欄會覆蓋部分的一些內容......在這種情況下，標題。我以前爲每個部分添加了這樣的邊距[name =「about-us」] {height：55px！important; 顯示：block！important; }。但是這根本不是一個好的做法，因爲它很容易指出它造成的巨大差距。我該如何解決這個問題？ –

導航欄固定頂部用jQuery取消CSS屬性

回答

相關問題