[英]How to make a navigation bar always stay at the top of a fixed-position panel that is in the middle of the screen?
[英]How is it possible to make a horizontal bar (fixed position, always at the top of screen) while its height is unknown?
我想在HTML
页面的顶部有一个水平栏。 它应该始终位于屏幕的顶部,所以我做了这个:
<body>
<div id="message_bar" style="position: fixed; top: 0px; width: 100%; z-index: 1000;">
</div>
<div class="other_divs" style="width: 100%; float: left;">
</div>
</body>
现在,这个酒吧不应该覆盖身体的其他部分。 如果我知道它的高度,那么让它为50px,我会这样做:
<body style="padding-top: 50px;">
但不幸的是,这个message_bar的height
是可变的和未知的(它的内容是在服务器端动态设置的)。
有没有办法纯粹通过CSS
解决这个问题?
非常感谢你。
PS此message_bar将在Windows应用程序中显示类似菜单栏:它们始终位于顶部,并且它们从不覆盖主体。 实际上, vertical scroll bar
从“other_divs”开始。
更新2:
嘿,难以置信! 我想我已经设法为纯水平的菜单栏创建了潜在的布局,纯粹是用CSS
。 这是我的解决方案,感谢vh
的力量:
<body>
<div style="display:block; width:100%; height:95vh !important; overflow:hidden;">
<div id="message_bar" style="float:left; width:100%; display:block;" >
this text appears always on top
</div>
<div style="float:left; width:100%; height:100%; display:block; overflow:auto;">
<div id="main_content" style="background:blue;">
Here lies the main content of the page.
<br />The below line is a set of 40 list items added to occupy space
<ol><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li><li>i</li></ol>
</div>
</div>
</div>
</body>
我在Chrome
, IE
和FireFox
查看了它,它工作得很整齐!
无论如何,我必须感谢这里的社区; 即使没有提供答案,讨论和不同的观点也会激发思考过程并简化解决方案的发现。
使用纯CSS解决此问题的唯一方法是在页面顶部添加一个副本,其position: relative
和较低的z-index。 这个重复的栏总是隐藏在固定的栏后面(你可以使用opacity: 0; pointer-events: none
如果需要,则为opacity: 0; pointer-events: none
),并将页面的其余部分向下推。 然而,这个解决方案非常难看,因为它添加了大量的HTML。
我推荐使用JavaScript和jQuery来实现一个非常简单的解决方案。
$(document).ready(function() {
$('.wrapper').css('padding-top', $('.message_bar').outerHeight());
});
并围绕页面内容创建一个包装器div( <div class="wrapper">Content...</div>
)。 或者,您可以将填充物应用于body
。
我对您的问题感兴趣,感谢您提供有关vh
和vw
价值的信息。 当我读到你的UPDATE 2
。 我发现还有一些东西可以改进。 以下是:
我改变overflow:scroll;
overflow:auto
。 因为当你的页面没有足够的高度。 值overflow:scroll
将创建一个灰色滚动条。 这对用户来说是不友好的。
我删除了最外层<div style="display:block; width:100%; height:95vh !important; overflow:hidden;">...</div>
并保留其他层。 换句话说,不使用vh
也可以解决你的问题。
有我的JSFIDDLE。 ( 注意 :JSFIDDLE没有达到以下效果。 在原生浏览器上复制这些代码。我认为这个原因与虚拟环境兼容性有关。它适用于chorme&Firefox&IE 10)
你为什么不只使用相对位置? 移除position: fixed;
。 这就是它的样子:
http://jsfiddle.net/darekkay/8ab6uw7n/1/
编辑:我不认为,你可以用纯CSS实现这个,如果你不知道消息的高度。 但你可以使用jQuery:
$("#message_bar").show(function() {
$( ".other_divs" ).css("margin-top", $(this).height() + "px");
});
你可以有一个没有滚动条的类,然后position属性将是position:absolute;
但如果你想在滚动的情况下保持这个topHeader不变,你必须使用.fixed
类
.topHeader {
background:#345;
color:#FFF;
height:50px;
padding:.5em;
position:absolute;
top:50px;
width:100%;
}
.fixed {
position:fixed;
top:0;
}
...并且你有一些javascipt来绑定scrol事件:
var pixels= 50; //in pixels
$(window).bind('scroll', function () {
if ($(window).scrollTop() > pixels) {
$('.topHeader ').addClass('fixed');
} else {
$('.topHeader ').removeClass('fixed');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.