javascript - 使用 jQuery 取消 css 属性的导航栏固定顶部

Question

我正在创建一个 WordPress 网站，并设法在我使用以下代码向下滚动页面时将我的导航栏固定在顶部:

(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/

Answer 1

看起来你的导航在固定时覆盖了整个屏幕

截图:

它发生是因为你在导航上有一个 bottom: 0 css 属性

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

解决方案是确保 bottom: 0 在修复模式下被禁用。您可以将 bottom: auto !important; 添加到您的 .fixed 类

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