Question

例如，stackoverflow有一个新成员的顶部栏。顶部栏已固定并向下推页面而不会重叠页面顶部。

这是如何完成的？

的Javascript？或者这可以用css完成吗？

Answer 1

您可以执行以下操作来创建固定标头：

<style>
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content { padding-top: 50px; }
</style>

<body>
<div class="header">header</div>
<div class="content">content</div>
</body>

也许请查看ie5.5 / ie6.0修复此处：http://www.howtocreate.co.uk/fixedPosition.html

Answer 2

在ben_h的回复中将Michiel的代码改编为OP的问题。

<style type="text/css">
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content{ /* normal stuff here */ }

/*** Only selects div.content immediately preceded by div.header.
If div.header doesn't appear, it won't select. ***/
div.header + div.content { padding-top: 50px; }
</style>

<body>
<div class="header">header</div>
<div class="content">content</div>
</body>

我会警告你，'IE6不会太喜欢它，但Dean Edwards的IE7.js会增加对兄弟选择器（+）的支持。

Answer 3

如果栏是position: fixed，防止它重叠内容的一种方法是设置静态高度，然后在主容器上设置相同高度的上边距。

如果您事先不知道固定div的高度，则必须使用JS来发现它的高度并相应地设置容器边距。

Answer 4

您应该只使用CSS。

这是一篇关于如何创建css设计“圣杯”的精彩文章。

包含三列的页面。一个固定宽度的左侧边栏用于菜单，右侧边栏用于广告或照片，还有一个可扩展的中心与内容一起流动。

请参阅：

寻找圣杯： CSS

做一个不与顶部重叠的固定顶杆的最佳方法是什么？

4 个答案: