Skip to main content

jQuery Keep Div on Bottom of Screen

By Sam Deering

How to keep div on screen (at the bottom or top) using jQuery.

This can be achieved with basic CSS but if this fails there is some jQuery/JavaScript you can use to
potentially fix the problem of keeping a div on the bottom of the screen even when scrolling.

.bottom { position:fixed; position:absolute; right:0; bottom:0; padding:0; margin:0; }

/*IE FIX*/
.fixie {
  left: expression( ( - jsrp_related.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top: expression( ( - jsrp_related.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
//note you MUST set a height property for it to work correctly
if ( $.browser.msie ) {
	div.css({position: "absolute", width: jslide_width, right: 0, height: 100});
} else {
	div.css({position: "fixed", width: jslide_width, right: 0, height: 100});

Further Techniques

There is also a jQuery plugin which can keep any element on the sidebar in view.

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Integromat Tower Ad