Come faccio a creare un elemento in una pagina che rimane sempre visibile, ma si muove fuori del modo di altri elementi?

Question

Ho una pagina HTML che un layout piuttosto complessa ( vedi qui ). Ho bisogno di mettere un'immagine in quella pagina che il visitatore può trascinare in qualsiasi modo che possa ricordare dove si trovava. Ho implementato la funzione segnalibro, ma ora ho bisogno di inserire l'immagine in un posto dove lei può facilmente afferrare.

In sostanza, mi piacerebbe l'elemento di rimanere al di sotto della ToC sulla destra ma non dovrebbe scorrere fuori dalla vista.

Credo che avrei potuto utilizzare JavaScript per spostare l'elemento non appena si inizia a scorrere fuori dalla vista, ma c'è una soluzione migliore? Posso dire "galleggiare a destra e al di sotto del div ToC o view.top, qualunque sia maggiore"?

O forse dovrei creare un'intestazione fissa (con i collegamenti e la forse la TOC)?

Tutte le altre idee?

Answer 1

Probabilmente può essere fatto utilizzando JQuery, ma sarà sempre nervosa. Vorrei prendere in considerazione un DIV fisso. Naturalmente si potrebbe posizionare che al di sotto menu, in modo che non sarà mai più elevato (= più vicino verso il bordo superiore) che il menu, e manterrà la sua posizione.

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

che richiederebbero che non c'è niente altro sotto il menu, altrimenti l'icona del segnalibro si sovrappongono altre cose.

Answer 2

Se si desidera solo l'immagine da fissare, ma comunque scorrevole alla parte superiore della finestra, quindi avrete bisogno di gestire l'evento di scorrimento della finestra, e impostare la posizione dell'immagine a fisso quando l'immagine viene fatto scorrere verso l'alto .

Per un esempio di questo, vedere il sito di navigazione a QuirksMode .

In alternativa, si potrebbe dare l'intero position: fixed; right: 0; TOC, dare il toc una larghezza, e dare il teaser di un diritto margine pari alla larghezza della TOC. Non ci sarebbe nessun requisito JavaScript in questo modo, e si avrebbe l'intero sommario sempre visibile.