多个顶部固定的 div？答案

【问题标题】：Multiple Top-Fixed Divs?多个顶部固定的 div？
【发布时间】：2012-05-15 07:28:25
【问题描述】：

我有两个 div： -标题栏，在滚动时固定，并卡在页面顶部。 - 一个通知 div，其中包含一个消息横幅，如果触发就会向下滑动。

标题栏固定在顶部，但我似乎无法让通知 div 自行修复在它下面。每次我尝试这个时，这个 div 都会固定在我的标题栏前面的页面顶部；似乎取而代之。填充似乎没有帮助。

谁能给我一些建议，好吗？

这是工作 div：

#header {
    text-align: left;
    background-image:url(../Resources/Banner2.gif);
    background-repeat:no-repeat;
    background-color:#00ed32;
    color:#FFF;
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
    padding:15px;
}

这是我想在它下面修复的 div：

.notify {
    background: url(../resources/gradients.png) 
    repeat-x 0px 0px; 
    top: -40px; 
    left: 0px;  
    position:fixed; 
    z-index: 100; 
    width: 100%; 
    overflow: hidden;
}

【问题讨论】：

你也可以显示一些代码吗？

标签： css html css-position

【解决方案1】：

最简单的方法是在页面顶部放置一个“支架”栏，然后在其中嵌套“标题”和“通知”元素。

例如：

CSS

#holder {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

#header, .notify{
    //what ever styles you have
    //position: relative or static
}

HTML

<div id="holder">
    <div id="header">...</div>
    <div class="notify">...</div>
</div>

编辑

工作示例：http://jsfiddle.net/Q6CWv/

更新

如果您使用 JQuery，在 .notify 元素上添加向下滑动效果应该相当简单：

$('.notify').slideDown();

工作示例：http://jsfiddle.net/Q6CWv/1/

【讨论】：

感谢您的回复。虽然这有点帮助，但这对我来说并不是最好的解决方案，因为当通知弹出时，它要么与标题栏重叠，要么在通知弹出之前不会弹出标题栏。是的，即使它们位于不同的 div 中，尽管这可能是我的错。我的解决方案是进入弹出通知的 JavaScript 并将“顶部”值更改为页面高度的 3%。这现在可以完美运行，只是如果应用了极端级别的缩放，标题和通知栏不会正确对齐。
@JoshMens 很高兴您找到了可行的解决方案。别忘了您可以在这个问题上添加自己的答案并在 48 小时内接受。这将在未来对其他人有所帮助，并帮助您获得一些支持；）
@JoshMens 我已经更新了我的答案，以展示如何应用通知下滑效果。无论您是否显示#header，这都会起作用。听起来您还没有将#header 和.notify 元素的position 从fixed 更改为static
@MyHeadHurts，你在left 0; 中漏掉了一个冒号。另外我想您应该将width 添加到#holder，例如100vw。至少在我的情况下 width 丢失了 - 我添加了 width 并且 id 帮助我解决了我的问题。

【解决方案2】：

虽然@MyHeadHurts 的回答有些帮助，但这对我来说并不是最好的解决方案，因为当通知弹出时，它要么与标题栏重叠，要么使其在通知之前不会弹出标题栏做过。我确实按照建议将它们放在单独的 div 中，但这可能是我的错。

我的解决方案是进入弹出通知的 JavaScript 并将“顶部”值更改为页面高度的 3%。这现在可以完美运行，只是如果应用了极端级别的缩放，标题栏和通知栏将无法正确对齐。

【讨论】：