Maintain element at the bottom of page on page scrolling

Question

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 bottom 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.

score 3 · Answer 1 · edited May 23 '17 at 09:58

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!

score 1 · Answer 2 · answered Apr 05 '11 at 13:53

1

Use CSS to fix the issue:

  position: fixed;

answered Apr 05 '11 at 13:53

John Strickler

25,151
4
52
68

2

IE6/IE7 quirks mode gets the "I don't care treatment". – John Strickler Apr 05 '11 at 14:07
2

Also, set your bottom margin of your content div to the height of the fixed div at the bottom. That way content will never be hidden beneath it. – John Strickler Apr 05 '11 at 15:42

score 1 · Accepted Answer · answered Apr 05 '11 at 14:05

1

Assuming your sticky div has an id 'sticky'

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

answered Apr 05 '11 at 14:05

fabrik

14,094
8
55
71

Maintain element at the bottom of page on page scrolling

3 Answers3