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.

No comments:

Post a Comment

Comments posted on ASP.Net Ajax Tutorials Blog are moderated and will be approved only if they are on-topic and not abusive. Please email me or my team for tech-support or blogging related questions. Avoid including website URLs in your comments - Thanks Author