如何使 Twitter 样式的警报贴在窗口顶部？答案

【问题标题】：How can I make a Twitter style alert stick to the top of the window?如何使 Twitter 样式的警报贴在窗口顶部？
【发布时间】：2010-04-11 19:18:51
【问题描述】：

这里有一个关于如何制作漂亮的 jQuery Twitter 样式警报的优秀代码示例：

http://blog.codecrate.com/2009/10/twitter-style-alerts-in-rails.html

$(function () {
  var alert = $('.alert');
  if (alert.length > 0) {
    alert.show().animate({height: alert.outerHeight()}, 200);

    window.setTimeout(function() {
      alert.slideUp();
    }, 3000);
  }
});

但是，代码不包含的一件事是将警报 div 粘贴到窗口顶部的功能，无论用户向下滚动页面多远。

我找到了一些示例，但似乎没有什么可以与现有代码搭配得很好。

有什么想法吗？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你可以使用 CSS 样式：position: fixed 虽然我认为 IE 有一些问题（这并不奇怪......）。

【讨论】：

这将一直有效，直到页面滚动。无论页面滚动到哪个位置，我都需要它贴在窗口顶部。
position:fixed 设置相对于窗口而不是内容的位置。它始终可见。

【解决方案2】：

使用position: fixed 和top: 0px。这将使 div 始终位于页面顶部。如果你想要它在右边或左边，然后将right: 0px 或left: 0px 添加到 div 中。

【讨论】：