滚动浏览后,我有一个水平菜单贴在网页浏览器的顶部。为了实现它我正在使用javascript(jquery)。现在我想隐藏该菜单并以特定分辨率显示移动菜单,但是当我向菜单类提供“display:none”时,它只隐藏原始菜单。
如果我将.original或.menu设置为“display:none”,它会隐藏原始静态菜单,并且固定菜单会立即粘贴到Web浏览器的顶部(您不必滚动)。
将.cloned设置为“display:none”不会执行任何操作。
如何摆脱固定菜单?
<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/
答案 0 :(得分:1)
之所以发生这种情况,是因为你的jss在设置完毕后会覆盖你的css。您有两种选择:
当屏幕小于display: none
时,您需要编写一些javascript来将.cloned
类的css更改为960px
。
您可以使用!important
覆盖,如下所示:
.cloned { display: none !important; }
但是,我强烈建议您使用选项1,因为!important
覆盖通常不是最佳做法。有关!important
的详细信息,请参阅此article。