Hi all.

I'm new to these forums and to js coding too - so please be gentle!

I have scriptaculous and prototype frameworks already in use on my site, so would like make use of them for this.

What I'd like to do is have a floating div which follows as users scroll down the page. There are a few other criteria though:

  • it needs to be displayed 425px from the top of the page when the user is at the top due to content above, and to float at this vertical position when scrolling
  • the page content is within a 950px div, centered on the page. The floating div should be displayed at the left edge of the main content so that the floating div is actually over the top of the main the content div
  • when the user scrolls to the bottom of the page, the floating div should stop moving down when it gets to within 250px of the bottom in order to avoid the footer
  • when the user resizes the window's width and scrolls horizontally, the floating div should remain in line with main content div - ie offset from the centered div

I'm hoping that one of you guys might be able to point me in the right direction or link to a good resource that I could use to achieve this.

Thanks in advance for any replies.