stackoverflow样式通知栏

Question

  

可能重复：
  Notification alert similar to how stackoverflow functions

通知栏顶部，显示“你赢得xyz徽章”之类的内容。 怎么做？我正在尝试在我的rails应用程序中创建类似的东西。我使用蓝图作为我的布局，它是标准的单列950px布局，从标题到页脚的所有内容都在容器div中。

Answer 1

使用z-index比页面上任何其他元素更高的固定位置元素，您可以非常轻松地完成此任务：

<div id="notification">
    You've earned xyz badge
</div>
<!-- rest of your site's markup -->

使用以下CSS：

#notification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: yellow; 
}

如果您需要创建并显示#notification，那么只需检查页面加载：

$(window).load(function(){
    if(showNotification){
        $('body').append(
            $('<div id="notification">You\'ve earned xyz badge</div>');
        );
    }
});