How to make a DIV always at the bottom of the page when scrolling

Question

I am using the below code to make a DIV always at the bottom of the page when scrolled. But this is not working and goes on increasing the Page height.

var LSscrollingDiv = $("#LightSwitchMenuIt");
$(window).scroll(function(){
  LSscrollingDiv
      .stop()
      .animate({"marginTop": ($(window).scrollTop() + $(window).height()) + "px"}, "slow" );            
});

Please help me on this.

Answer 1

Why not use straight CSS?

div.foo {
    position: fixed;
    bottom: 0px;  
}

Demo.

See:

• https://developer.mozilla.org/de/CSS/position

Answer 2

This might be a simple CSS issue ... you can place a DIV to a fixed position at the bottom of the viewport and it will always be there when scrolling, without any Javascript

position: fixed;
bottom: 0px;

Answer 3

You can use css

position: fixed;
bottom: 0;

to avoid having to do this in javascript if you like.

http://jsfiddle.net/A8BGJ/ is a simple demonstration.

Answer 4

It may help to have width set as inherit too.

#div {
position: fixed;
bottom: 0;
width: inherit;
}