Kontrolle immer sichtbar halten

Question

Ich frage mich, ob jemand weiß, wie man ein Bild/Steuerelement immer sichtbar hält, wenn der Benutzer die Seite hoch und runter scrollt.

Ein Beispiel ist auf der neuen Google-Suchseite, die automatisch Ihre Ergebnisse beim Eintippen berücksichtigt. Auf der rechten Seite befindet sich eine Karte, die im oberen Teil der Seite 100-mal beginnt. Wenn Sie einen Bildlauf nach unten durchführen, bleibt die Karte sichtbar, ist aber 0 Pixel vom oberen Seitenrand entfernt. Wenn Sie einen Bildlauf nach oben durchführen, kehrt er zu seiner normalen Position 100 Pixel vom oberen Rand der Seite zurück.

Irgendwelche Ideen, wie das gemacht wird?

Answer 1

Sie suchen position: fixed

<div style="position: fixed; right: 100px; top: 100px; width: 200px; height: 100px; background-color: red"> 
I'm fixed</div> 

Arbeiten in allen Browsern außer IE6.

Answer 2

position:fixed ist der Weg, hier zu gehen. Wenn Sie den beschriebenen Effekt wie auf der Google-Seite erreichen möchten, benötigen Sie ein kleines Javascript, das die CSS-Stile des Elements abhängig von der Bildlaufposition umschaltet.

Sie können ein Skript für diese Aufgabe finden Sie hier: http://jsfiddle.net/6bnuU/

Beachten Sie, dass auf jquery abhängt. Wenn Sie nach einer Lösung suchen, die jQuery nicht benötigt, können Sie das Skript einfach neu schreiben, aber Sie müssen einen Browser-Schalter verwenden, da IE eine andere API für den Scroll-Status als die anderen Browser verwendet. Beachten Sie auch, dass IE 6 nicht Position unterstützt: fest, so dass, wenn Sie es unterstützen möchten, müssen Sie es mit Javascript emulieren müssen (was eine leichte Aufgabe ist)

Answer 3

Verwenden CSS position mit dem Wert fixed, dann Position es auf der Seite mit left, right, top und/oder bottom. Zum Beispiel:

#some_element { 
    position: fixed; 
    top: 100px; 
    right: 0; 
} 

Das genaue Beispiel, das Sie erwähnen, erfordert auch einige JavaScript.