How can I make a Twitter style alert stick to the top of the window?

Question

There is an excellent code example on how to make nice jQuery Twitter style alerts here:

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);
  }
});

However, one thing that the code doesn't include is functions to stick the alert div to the top of the window, no matter how far down the page the user has scrolled.

I have found a few examples but nothing seems to play nice with this existing code.

Any ideas?

Answer 1

You can use the CSS style : position: fixed though I think IE has some issues with that (no surprise there..).

Answer 2

Use position: fixed as well as top: 0px. That will keep the div at the top of the page, always. If you want it to the right or left, then add right: 0px or left: 0px to the div.