Question

我实现了代码来显示stackoverflow屏幕顶部的栏：How to show popup message like in stackoverflow

这样做是在页面顶部的div顶部显示div。如何显示新的“bar”div并推送其他div？就像StackOverflow一样。

Answer 1

请勿在css中使用“position：fixed”属性，请尝试“绝对”： http://www.w3schools.com/css/pr_class_position.asp

固定位置相对于“视口”（浏览器窗口）。

绝对位置相对于您的html文档。

Answer 2

修改：对我的代码的立即反应是不使用div#removeme标记，而是提供margin-bottom。但是，如果您使用position:fixed，这将无法正常工作，因为它将自身附加到窗口而不是文档。

这就是我的所作所为：

在我的html文档中：

<div id="removeme">
    <br /><br />
</div>

<div id="header"> This is a floating pane! </div>
<div id="content"> Your content goes here... </div>

此浮动窗格的CSS为：

 #header {
   position: fixed;
   top: 0px;
   left: 0px;
   text-align: center;
   background-color: #FFE6BF;
   height: 30px;
   border: 1px solid #FFCFA6;
   width: 100%;
  }

然后在<head>标记中使用jquery：

$(document).ready(function() {
 $('#header').click(function() {
  $('#header').slideUp('fast');
  $('#removeme').remove();
 });
});

我有一个额外的<div>标记，其标识为removeme，可以在浮动窗格可见时将内容向下推送，并在隐藏浮动窗格时将其删除。

Answer 3

在不知道html的完整结构的情况下，最简单的方法是将正文的margin-top设置为消息div的高度，将页面内容向下推。然后你应该把它换回来。我已经完成了它作为淡入淡出之后发生的回调，但是如果看起来太过于跳跃，你可能会在淡入淡出之前实现它。

$(document).ready(function() {
    $("#message").fadeIn("slow",
        function() {
            $('body').css('margin-top', $(this).height());
        }
    );
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow",
            function() {
                $('body').css('margin-top', 0);
            }
        );
        return false;
    });
});

Answer 4

您可以将栏的位置css属性设置为“已修复” 然后创建一个“填充”div来填充顶部栏的高度。这个填充div下还有一个div。你有它，你的页面的其余部分将滚动，但你的栏将坚持在顶部。如果您希望所有内容都使用条形图上下移动，请在固定位置div和该填充上使用slideUp。它们都将消失，页面的其余部分将向上滚动。反之亦然，如果你想显示顶部栏。

如何在SO中显示“第一次在这里”栏并将其他DIV向下滑动？

4 个答案: