stackoverflow样式通知栏[重复]答案

【问题标题】：stackoverflow style notification bar [duplicate]stackoverflow样式通知栏[重复]
【发布时间】：2010-09-16 15:54:57
【问题描述】：

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

顶部的通知栏显示“您获得了 xyz 徽章”之类的内容。它是如何完成的？我正在尝试在我的 rails 应用程序中创建类似的东西。我的布局使用蓝图，它是标准的单列 950 像素布局，从页眉到页脚的所有内容都在容器 div 中。

【问题讨论】：

你问的是后端还是 CSS + JS 组合的效果？
这个问题已经在这里被问了十亿次了......查看该死的来源！
Notification alert similar to how stackoverflow functions 的可能副本。 @Josh：昨天甚至有人问过！投票结束。
我已经尝试了其他帖子的建议，但它对我不起作用，这就是我问的原因。我想要的行为是通知栏停留在页面的其余内容上，即主蓝图容器，但不隐藏它。如果用户滚动，他们应该仍然能够看到导航栏、标题等，它们是蓝图容器的一部分。提到的解决方案隐藏了这些部分，可能与蓝图有关。这就是我问的原因。
@Andy 是的，我昨天也看到了。如果此站点上的搜索栏有价值，那么这种情况可能不会那么频繁地发生。

标签： jquery ruby-on-rails css

【解决方案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>');
        );
    }
});

【讨论】：