Ich stelle fest, dass viele Websites in letzter Zeit neue Arten von Scrolleffekten implementieren. Hier ein Beispiel:
Wenn Sie zum ersten Mal mit dem Bildlauf beginnenAbschnitt bleibt an Ort und Stelle (Z-Index von 1?), während der Inhalt darüber angezeigt wird. Es verwendet auch Fragmente und hebt die Navigationsleiste dynamisch hervor, je nachdem in welchen Bereich der Benutzer gescrollt hat.
Ich habe gesehen, dass einige Sites ähnliche Techniken verwenden. Eine (die ich nicht finden kann) führt den Hintergrund dynamisch aus.
Gibt es eine gemeinsame Technik für diese Arten von Websites?
Antworten:
0 für die Antwort № 1Die ersten beiden Abschnitte verwenden position:fixed.
Dies behebt die Elemente zu einer Position auf der Seite. Sie bewegen sich auch beim Scrollen nicht.
Der Bildlaufabschnitt verwendet position:absolute mit einem hohen z-index.
Dies scrollt gut und weil es eine höhere hat z-index als das fixed position Elemente, scrollt es über sie.
0 für die Antwort № 2
Es gibt mehrere Möglichkeiten, dies zu tun, aber am einfachsten ist es, einfach ein div zu machen und CSS zu verwenden
"position:fixed;"
Eigentum. Dadurch bleibt das div relativ zum Browserfenster genau dort, wo es ist.
Sie können Ihren Z-Index auch auf einen großen Wert setzen, damit das Div sicher über dem Rest der Seite bleibt.
0 für die Antwort № 3
Für das Menü und die Kopfzeile wird eine einfache CSS-Lösung verwendet position: fixed und z-index. Sowohl Menü als auch Kopfzeile haben position: fixed, während das Menü eine große hat z-index Wert und der Hauptinhalt hat einen etwas niedrigeren:
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
Was das Fragment betrifft, so wird dies mit JS gemacht. W3Fools hat das gleiche mit jQuery. Vielleicht können Sie entschlüsseln das Skript. Sieht so aus, als hänge es an dem Bildlaufereignis des Dokuments an, prüft, ob sich die Position befindet, wenn sich das Element über der Position des Ansichtsfensters befindet, und ergreift entsprechend Maßnahmen.
0 für die Antwort № 4
Eine Möglichkeit besteht darin, CSS + JavaScript zu kombinieren (jQuery).
CSS:
position:fixed für die obere Platte.
Benutzen jQuery Offset um die Containerposition zu ermitteln und danach können Sie CSS-Klassen für die "Highlights-Navigationsleiste" anwenden.