Friday, May 22, 2009

Scrolling div at fixed position on scrolling of window.

we can scroll div element and keep its location fixed by calculating its new left and top properties
and moving it to that position..
we have to find out new value for top style of that div element.
here is the script for moving div element to the new position..

<script type="text/javascript" language="javascript">
FloatElement();
window.onscroll=FloatElement;
window.onresize=FloatElement;
function FloatElement()
{
var myfloaingTop=500;
if(document.all)
{
document.getElementById("myfloaing").style.top=document.documentElement.scrollTop+myfloaingTop;
}
else
{
document.getElementById("myfloaing").style.top=window.pageYOffset+myfloaingTop+'px';
}
}
</script&ght;


here is the div element.

<div id="myfloaing" style="position: absolute; width: 200px; height: 50px; left: 500px;
top: 0px; padding: 16px; background: #FFFFFA; border: 2px solid #2266AA">

My Floating div.
</div>


thanks.