make div stick to the BOTTOM of the browser as you scroll

crmpicco · 09-14-2005, 01:00 PM

Code:

function movediv()
{
	booking_details.style.top = document.body.scrollTop;
}

---------------

<style>
.demo {color:#000000; border-color:#666666; background-color:#FFCC00; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;
layer-background-color:#cccccc; position:absolute; left:12.5%; bottom:0px; width:100%; height:100px; visibility:hidden; z-index:5; border-color:#FFFFFF; border:inherit;}
</style>

---------------

<body onScroll="movediv();">

<div id="booking_details" class="demo" style="visibility:hidden">
....
.... code .....
....
</div>

</body>

When i scroll the DIV sticks to the TOP of the browser, is there any way to
make it sticks to the BOTTOM of the browser as you scroll?

crazygamer · 09-14-2005, 03:31 PM

<div id="myDiv"></div>
<script>
var winHeight;
if ( window.innerHeight ) {
winHeight = window.innerHeight;
}
else if ( document.body.clientHeight ) {
winHeight = document.body.clientHeight;
}

myDiv = document.getElementById("myDiv");
myDiv.style.top = winHeight - myDiv.height;
</script>

Let me know if that works, I pulled it off the top of my head because I'm in a rush (anotherwords, it's NOT tested). Should work in IE and Firefox, probably most other browsers.

rm-f · 09-14-2005, 04:22 PM

FF example, see crazygamer's comment for cross browser compatibility.

Code:

<html>
<head>
    <title>Div on Bottom</title>
    <script>
        function movediv() {
            var divElem = document.getElementById('booking_details');
            divElem.style.top = (window.scrollY + window.innerHeight - parseInt(divElem.style.height)) + 'px';
        }
        function stupid() {
            document.getElementById('booking_details').style.height = '100px';
            movediv();  //sync reload
        }
    </script>
    <style type="text/css">
        #booking_details {
            color: #000000; 
            border-color: #666666; 
            background-color: #FFCC00; 
            font-family: Verdana, Arial, Helvetica, sans-serif; 
            font-weight: bold;
            layer-background-color: #cccccc; 
            position: absolute; 
            left:12.5%; 
            bottom:0px; 
            width: 87.5%; 
            height: 100px;
            /*
            visibility:hidden; 
            */
            z-index:5; 
            border-color:#FFFFFF; 
            border:inherit;
        }
    </style>    
</head>
<body onload="stupid();" onscroll="movediv();">
<div id="booking_details">
Stay on Bottom of the Page
</div>
<script>
for(var i=0; i<100; i++) {
    document.write('line: ' + i + '<br>');
}
</script>
</body>
</html>

hassan · 10-01-2009, 02:42 AM

hey ,

you do not need to use in script you can use only CSS to make that happens.

#mydiv {
position: fixed;
z-index: 2;
bottom: 0px;

}

let me know if it works for you.

Hassan