Maintain element at the bottom of page on page scrolling

I'm using this code for putting a div in bottom of page:

http://jsfiddle.net/gyExR/ (special thanks to this user)

Now how can I maintain the element at the bot开发者_StackOverflow中文版tom of the page on scrolling?

I did try to add event on window scrolling and setting position and bottom again, but it did not work.

---

Sounds like the classic "sticky footer" problem, where you want to keep the footer stuck to the bottom of the screen (i.e. viewport) rather than the bottom of the page.

The CSS, position:fixed;, doesn't work in IE, but there are many other solutions. The good ones are purely CSS based and work in IE.

I'd recommend http://ryanfait.com/sticky-footer/ as its markup is clean and CSS is brief. It even works from IE5 upward!

---

Assuming your sticky div has an id 'sticky'

$(window).scroll(function (){
    $('#sticky').stop().animate({bottom: 20}, 'slow');
});

---

Use CSS to fix the issue:

  position: fixed;