<div> follows you as you scroll

crmpicco · September 5th, 2005, 08:57 AM

Code:

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

....

</div>

I have this div that is shown when a link is clicked, is there a way to have the <div> 'follow'
you as you scroll. like about.com??

It is absolutely positioned at the foot of the page.

www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
www.piccosmini.co.uk.tt
www.morton.uk.tt

crmpicco · September 5th, 2005, 09:00 AM

e.g. http://php.about.com/

www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
www.piccosmini.co.uk.tt
www.morton.uk.tt

philip_cole · September 5th, 2005, 02:10 PM

Hi Craig,

i found this great one a couple of years back:
http://www.webreference.com/dhtml/column37/index.html
but it doesnt work in everything, e.g. firefox.

To work in other browsers you need to set an absolute position and handle onscroll events, something like this:

<script>
function movediv()
{
booking_details.style.top = document.body.scrollTop;
}
</script>
<body onscroll="movediv()">
<div id="booking_details" class="demo" style="visibility:hidden; position:absolute;top:0px;left:0px;">....</div>
</body>

Hope this helps
Philip Cole

crmpicco · September 14th, 2005, 06:58 AM

thanks Philip, that code is great but:

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?

www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
www.piccosmini.co.uk.tt
www.morton.uk.tt