Hello,

I want to stick one DIV to the bottom! I've managed to do that but when I scroll down the DIV doesn't scroll smoothly! Below is my code:-

<div id="x">
 <center>
  <div id="footer" style="width: 95%; background-color:#66CCFF; border: 1px normal black; top: 100px; position:absolute; align:center; height: 50px" align="center"><center>A</center></div>
 </center>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script>

window.onscroll = function() { 
	document.getElementById("footer").style.display = "none";
	document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px";
	document.getElementById("footer").style.display = ""; };

document.onscroll = function() { 
	document.getElementById("footer").style.display = "none";
	document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px";
	document.getElementById("footer").style.display = ""; };

</script>

Check attachment for the code too!

Please help me!

Thanks,
Akshit Soota

Attachments
<div id="x">
 <center>
  <div id="footer" style="width: 95%; background-color:#66CCFF; border: 1px normal black; top: 100px; position:absolute; align:center; height: 50px" align="center"><center>A</center></div>
 </center>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script>

window.onscroll = function() { 
	document.getElementById("footer").style.display = "none";
	document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px";
	document.getElementById("footer").style.display = ""; };

document.onscroll = function() { 
	document.getElementById("footer").style.display = "none";
	document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px";
	document.getElementById("footer").style.display = ""; };

</script>

you want a div to stay on the bottom of the screen? always, no matter where yo scroll, or just the bottom of the page? there's no reason to have all those breaks, position: fixed; bottom: 0px; :D

you want a div to stay on the bottom of the screen? always, no matter where yo scroll, or just the bottom of the page? there's no reason to have all those breaks, position: fixed; bottom: 0px; :D

Looking up on about 1000 pages for over hours and days and on over 3 search engines, gave me the same answer, but I want it to work like hits and it doesn't work on IE, I betcha!

Anyways thanks, please help me!

Regards,
Akshit Soota

This article has been dead for over six months. Start a new discussion instead.