How do I create an element on a page which always stays visible but moves out of the way of other elements?

Question

I have a HTML page which a pretty complex layout (see here). I need to put an image on that page which the visitor can drag anywhere so she can remember where she was. I've implemented the bookmark feature but now I need to place the image somewhere where she can easily grab it.

Basically, I'd like the element to stay below the ToC on the right but it shouldn't scroll out of view.

I guess I could use JavaScript to move the element as soon as it starts to scroll out of view but is there a better option? Can I say "float right and below the ToC div or view.top, whichever is greater"?

Or maybe I should create a fixed header (with the links and the maybe the ToC)?

Any other ideas?

Answer 1

It can probably be done using JQuery, but will always be jittery. I would consider a fixed DIV. Of course you could position that below the menu so it will never be higher (= closer towards the top edge) than the menu, and will maintain its position.

.thingy { position: fixed; right: 0px; top: 415px; width: 256px }

That would necessitate that there is nothing else below the menu, otherwise the bookmark icon will overlap other things.

Answer 2

If you just want the image to be fixed, but still scrollable to the top of the window, then you'll need to handle the window's scroll event, and set the image's position to fixed when the image is scrolled to the top.

For an example of this, see the site navigation on QuirksMode.

Alternatively, you could give the entire TOC position: fixed; right: 0;, give the toc a width, and give the teaser a right-margin equal to the TOC's width. There would be no JavaScript requirement this way, and you'd have the entire TOC always visible.