Question

我正在按照本教程在浏览器窗口顶部显示消息。

jQuery Notification Message like StackOverflow

CSS：

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

问题：

但问题是它显示在顶部的页面内容上方，我的网站菜单隐藏在它后面。

我希望它出现在网页内容的顶部，当用户关闭它时，页面内容应该向上移动。当用户滚动浏览器页面时，它也不应该移动。就像stackoverflow.com一样。

我怎样才能实现这个目标

由于

Answer 1

如果您想使用position:fixed，那么如果您向下滚动消息仍然存在，请在页面顶部添加相同高度的另一个（空）div，但不要将其定位。当页面向上滚动时，固定的div将位于其顶部，当您向下滚动时，它将移动。

Answer 2

如果您使用position:fixed定位邮件，则可以更改正常流程。只需将其放在html菜单上方，当用户点击隐藏按钮时，菜单就会取而代之。

演示： http://jsfiddle.net/vNpeG/

Answer 3

只需将<div>放在<body>的顶部，然后使用position: static。这是默认设置，因此如果您只是离开position，它也可以正常工作。

要允许它滚动，请使用Grim's solution。这是一个工作示例：http://jsfiddle.net/PPvG/sECk9/1/

您可以通过编程方式创建占位符，因此它与通知消息具有完全相同的高度：

var placeholder = $('<div />').css('height', $('#notification').outerHeight());

删除通知后，您可以在动画完成后删除占位符：

$('#notification').fadeOut("slow", function() {
    placeholder.remove();
});

stackoverflow中的一些更改如顶部的通知消息？

3 个答案: