[英]Can't hide fixed menu using media queries
I have a horizontal menu that sticks to the top of web browser after you scroll past it. 在滚动浏览器之后,我有一个水平菜单贴在Web浏览器的顶部。 To make it happen i'm using javascript (jquery). 为了做到这一点,我正在使用javascript(jquery)。 Now i want to hide that menu and show mobile menu at certain resolution, but when i give "display: none" to menu classes, it only hides original menu. 现在,我想隐藏该菜单并以特定的分辨率显示移动菜单,但是当我给菜单类“显示:无”时,它仅隐藏原始菜单。
If i set .original or .menu to "display:none" it hides original static menu, and fixed menu sticks to the top of web browser immediately (you don't have to scroll). 如果我将.original或.menu设置为“ display:none”,它将隐藏原始的静态菜单,并且固定的菜单会立即停留在Web浏览器的顶部(您无需滚动)。
Setting .cloned to "display:none" doesn't do anything. 将.cloned设置为“ display:none”不会执行任何操作。 How to get rid of that fixed menu ? 如何摆脱固定菜单?
<script>
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
@media screen and (max-width:960px){
.cloned {
display: none;
}
.original {
display: none;
}
.menu {
display: none;
}
#navi {
display: none;
}
#content {
width: 90%;
}
}
jsfiddle: https://jsfiddle.net/765kadoj/3/ jsfiddle: https ://jsfiddle.net/765kadoj/3/
The reason it is happening is because your javascript is overriding your css after it has been set. 发生这种情况的原因是因为您的JavaScript在设置后会覆盖您的CSS。 You have two options: 您有两种选择:
You need to write some javascript to change the css to display: none
for the .cloned
class when the screen is smaller than 960px
. 您需要编写一些JavaScript来更改css的display: none
当屏幕小于960px
时, .cloned
类display: none
提供此.cloned
。
You can use the !important
override, which would look like this: 您可以使用!important
覆盖,如下所示:
.cloned { display: none !important; }
However, I would strongly suggest using option 1, since the !important
override typically isn't the best practice. 但是,我强烈建议使用选项1,因为!important
替代通常不是最佳实践。 For more information on !important
, see this article . 有关!important
更多信息,请参见本文 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.