[英]Navbar fixed top with jQuery canceling css properties
I am creating a WordPress site and managed to put my navbar fixed to the top when I scroll down the page using this code: 我正在创建一个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);
But now when I click on the icons that I have on the page (on the Products and Services sections), neither the popups nor the the animation applied on the icons work. 但是现在,当我单击页面上(在“产品和服务”部分上)上的图标时,弹出式窗口或应用于图标的动画都无效。
When I deactivate this particular jQuery code, the popups work fine. 当我停用此特定的jQuery代码时,弹出窗口可以正常工作。
Is there another way that I can make the navbar fixed to top and still have my icons working fine? 还有其他方法可以使导航栏固定在顶部,并使图标仍然可以正常工作吗?
Is there anything wrong on the jQuery? jQuery有什么问题吗? http://scentology.burnnotice.co.za/ http://scentology.burnnotice.co.za/
it appears that your nav is covering the whole screen when it's fixed 修复后,您的导航似乎覆盖了整个屏幕
it happens because you have a bottom: 0
css properties on the nav 它的发生是因为您有一个bottom: 0
导航上的bottom: 0
CSS属性
nav#site-navigation {
position: absolute;
right: 0;
bottom: 0;
}
the solution is to make sure that bottom: 0
is disabled when it's in fix mode. 解决方案是确保在修复模式下,禁用bottom: 0
。 You can add bottom: auto !important;
您可以添加bottom: auto !important;
to your .fixed class 到您的.fixed类
.fixed {
top: 4%;
width: 100%;
text-align: center;
bottom: auto !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.