jquery - stackoverflow 中的一些更改，例如顶部的通知消息？

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 将位于其顶部，而当您向下滚动时，它会移动。