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.

友情链接