CSS and JavaScript Conditionally Repositioning onScroll an Absolutely Positioned DIV

Question

We have a client who desires some extremely long pages. Say 4000px plus.

They would like to have a back to top element that appears at 1200px from top in the nav column and then continues to reposition as you scroll to say 200 from top.

This sounds to me like something CSS cannot, at present, do especially if IE 6 needs to be accommodated.

Does this sound correct to you? Anyone got a link to an applicable tute? I have been trying to find a jQuery or Mootools example without luck so far.

Peace,

JG

Answer 1

Scroll Follow might do what you want; it takes an "offset" parameter which sticks your element to the specified distance from the top of the viewport.

Answer 2

I suspect it's possible to do this with JavaScript, assuming there's some way to detect when the browser window scrolls, but I agree there's probably no way to accomplish it with just CSS.

I think a better approach is to have the page broken up into logical sections with "Scroll to top" links at the start of each of them. This is done fairly often on long pages, whereas I'm not sure I've ever seen the approach your client suggested.

Not to mention which, a very long page is often difficult to read and navigate.