导航栏固定顶部用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属性

回答

相关问题