Question

我想在stackoverflow上创建相同的 - 橙色comunnicates，但我有css的问题。我不知道如何其他页面不覆盖消息。在stackoverflow上，橙色消息在页面上有自己的空间（与消息== 1或消息== 5相同） - 我该如何制作？

<div class="home">
    <div class="message">one
        <br />
        two
        <br />
        three
    </div>
    <div class="logo">AAAA</div>
</div>
<br /> <br />
<div class="home">
    <div class="message">one

    </div>
    <div class="logo">BBB</div>
</div>

.home {
    width: 400px;
    height: 200px;
    background-color: #f4f28d;
}

.logo {
    width: auto;
    height: 100px;
    background-color: blue;
    font-size: 80px;
}

.message {
    width: 400px;
    background-color: orange;
    border: solid 1px black;
    position: fixed;
}

JSFIDDLE：http://jsfiddle.net/JzUsG/

编辑： .message必须修复 - 如果页面滚动，我也想看看这个

http://jsfiddle.net/VnbZf/1/

Answer 1

只需将位置固定在0,0，然后在页面顶部添加一些边距，根据每条消息的高度乘以消息数量计算：

http://jsfiddle.net/C8uBS/

如果你想在服务器端没有计算更“动态”的东西，你可以用javascript计算消息的高度，然后将其注入适当的位置：

http://jsfiddle.net/kGXnZ/

Answer 2

如果必须在页面顶部修复消息，我恐怕唯一的解决方案是使用position: relative;并使用一些Javascript在滚动页面时移动栏。 Here 您可以看到Mootools示例，但您可以使用jQuery或使用纯Javascript实现相同的结果。

如果您想避免使用Javascript，则必须在页面呈现之前知道消息栏的高度。所以，假设条形高度为60px，您可以将栏放在之外<{1}}并将<div>（或padding-top: 60px;）放在{{1} }}。您可以看到结果 here 。

Answer 3

洛伦佐的回答延伸。我试图通过$( window ).scroll()的处理程序来完成类似的事情和相对位置，这使得元素成为可行的方法。建议填充到固定元素高度的解决方案的问题在于，通常不知道实际高度是在开始时还是在加载时，例如当元素是包含将动态添加的图像元素或元素的div时。建议克隆的解决方案的问题是你必须小心改变id，有时当你用作选择器时你不需要相同的类名，所以你最终走了dom改变id和类，你的css得到了杂乱无章。因此，为了完成与position:fixed相同的操作，同时仍占用文档中的原始空间（流程）：

position: relative。设置元素的位置以随页面移动到相对位置。
$( window ).scroll() handler。为window.scroll实现一个处理程序。

当页面在滚动处理程序内滚动时，计算并移动元素。类似的东西：

$element
    .stop()
    .animate( { 'top': distance }, { "duration": 500, "easing": "easeInOutQuart" } );

Answer 4

处于（我认为）类似的情况，即修复第一个 div（如导航栏）避免让下一个 div 部分（在我的情况下，部分）隐藏在第一个 div 下方，我找到了这个解决方案：我将第一个 div 设置为“位置：粘性；顶部：0px”这样第一个 div 固定在顶部（我的意图），但空间仍然“被占用”。很有魅力。

自己的位置固定空间？

4 个答案: