Wie behalte ich die Position des Bildes beim Scrollen?

Question

Ich habe eine Website, die in WordPress gemacht wird. Der gesamte Inhalt meiner Seiten ist in ein div eingepackt. Was ich jetzt tun möchte, ist Banner auf beiden Seiten des Inhalts hinzuzufügen und sie während des Scrollens zu fixieren.

Also, die Oberseite der Banner sollte mit der Oberseite ausgerichtet sein.
Die rechte Seite des linken Banners sollte direkt neben der linken Seite des Hauptinhalts sein.
Die linke Seite des rechten Banners sollte direkt neben der linken Seite des Hauptinhalts sein.

Daher würde ich alle Elemente von links nach rechts erhalten: Links Banner -> Inhalt -> Recht Banner. Alle sind oben ausgerichtet. Und wenn ich die Seite scrolle, scrollt nur der Inhalt und nicht die Banner.

Es ist wichtig, dass die Banner an den Seiten des Inhalts verankert sind. Wenn also die Breite des Browsers schrumpft, werden Teile der Banner nicht mehr angezeigt, statt dass die Banner über den Hauptinhalt hinausgehen.

Answer 1

Fix sie mit

position:fixed; 

Für sie oben ausrichten Sie mit Rand arbeiten und schweben, denke ich. Als Beispiel links Banner:

float:left; 

Jetzt können Sie leicht mit Margen arbeiten, um sie richtig zu positionieren. Ich hoffe, das hast du gemeint?

Answer 2

Unter der Annahme, Banner haben eine class="banner banner-right" oder class="banner banner-left" gehen mit

.banner { 
    position: fixed; 
    top: 0; /* or the distance from top page edge */ 
    max-height: 100%; 
} 
.banner-right { right: 0; } /* or the distance from right page edge */ 
.banner-left { left: 0; } /* or the distance from left page edge */ 

und die Banner wird in der gleichen Position bleiben, auch wenn Sie die Seite scrollen! Die max-height ist da, um zu verhindern, dass Banner länger als das Fenster selbst sind, wodurch Inhalte versteckt werden;

möchten Sie vielleicht overflow: auto; hinzufügen, wenn das Banner Inhalt zu lang wird

Eine andere Lösung Wold

html, body { height: 100%; } 
.content { max-height: 100%; overflow: auto; } 

machen das Inhaltselement mit einem Scrollbar und verlassen die Banner an der gleichen Stelle zu setzen sein

Answer 3

können Sie CSS verwenden. Position ist tatsächlich fixiert. Hier ein fiddle ex:

.banner { 
     position:fixed; 
     width: 100px; 
     height: 100px; 
     background-color: mediumaquamarine; 
     top: 40px; 
    } 

Answer 4

Sie können sich position: sticky wie:

position: sticky; 
top: 5px;