Wie erstelle ich ein Element auf einer Seite, die immer sichtbar, aber bewegt sich aus dem Weg anderer Elemente bleibt?

Question

Ich habe eine HTML-Seite, die ein ziemlich komplexes Layout (

War es hilfreich?

einreichen

Lösung

Es kann wahrscheinlich mit JQuery getan werden, aber immer nervös sein. Ich würde einen festen DIV betrachten. Natürlich könnten Sie das unter dem Menü positionieren, so wird es nie höher sein (= näher an der Oberkante) als das Menü, und werden seine Position halten.

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

Das würde voraussetzen, dass es nichts anderes unter dem Menü ist, da sonst das Lesezeichen-Symbol wird andere Dinge überlappt.

Answer 1

Es kann wahrscheinlich mit JQuery getan werden, aber immer nervös sein. Ich würde einen festen DIV betrachten. Natürlich könnten Sie das unter dem Menü positionieren, so wird es nie höher sein (= näher an der Oberkante) als das Menü, und werden seine Position halten.

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

Das würde voraussetzen, dass es nichts anderes unter dem Menü ist, da sonst das Lesezeichen-Symbol wird andere Dinge überlappt.

Answer 2

Wenn Sie nur das Bild behoben werden soll, aber immer noch scrollbaren zum oberen Rand des Fensters, dann müssen Sie das Fenster des Scroll-Ereignis behandeln, und stellen Sie die Position des Bildes festgelegt, wenn das Bild nach oben gescrollt wird .

Ein Beispiel hierfür finden Sie in der Seitennavigation auf Quirksmode .

Alternativ können Sie den gesamten TOC position: fixed; right: 0; geben, geben dem toc eine Breite, und geben dem Teaser ein Recht margen gleich der Breite des TOC. Es gäbe keine JavaScript Anforderung auf diese Weise, und Sie würden den gesamten TOC haben immer sichtbar.