Eine Reihe von Websites verfügen über eine Funktion, bei der ein Element auf der Seite beim Scrollen UNBESTIMMT wird, bis Sie einen bestimmten Punkt, wie das Ende einer Seitenleiste, angetroffen haben und sich dann an der Unterseite dieser Seitenleiste verankert. Sobald Sie einen Bildlauf nach oben durchführen, verhält er sich wie ein feststehendes Element und bleibt beim Scrollen auf Ihrem Bildschirm.
Wie nennt man das und wie wird es gemacht?
Sie können Position auf absolute und angehängte Scroll-Ereignis auf die Seite setzen und in diesem Fall ändern Sie den oberen CSS-Wert basierend auf der Position der Bildlaufleiste (in jQuery ist es scrollTop in reinem Javascript sollte es ähnlich sein), und dann Bedingung hinzufügen, dass top wird nur geändert, wenn scrollTop kleiner ist als ein bestimmter Wert wie offset.top + Höhe der Seitenleiste.
Du kannst Ссылка verwenden, aber ich weiß, dass das nicht genau das ist, wonach du suchst. Es gibt eine Verzögerung zwischen dem Scrollen und dem div wenn es in Sicht kommt, muss es ständig aufholen.
Die Wurzel des Codes ist jQuerys .scroll() -Handler , also ist es ein guter Ausgangspunkt. Soweit ich weiß, gibt es keinen offiziellen Namen für diesen Effekt, aber ich habe es so viele Orte beschrieben, jetzt, wo jemand es wissen will, kann ich es nicht finden!
BEARBEITEN Folgendes habe ich gesucht: Dauerhafte Header in CSS-Tricks
Die Grundlagen von Chris Coyiers Technik sind html:
%Vor%css:
%Vor%und jQuery:
%Vor%Hören Sie sich das Scroll-Ereignis an, wenn sie an dem Element vorbeilaufen, das Sie im Blick behalten möchten. Sie ändern die Position der Elemente in 'fixed'.
Ich habe ein jsFiddle erstellt, das dies illustriert: Ссылка
Es gibt ein paar Dinge zu beachten, zum Beispiel ein festes Element wird relativ zum Fenster oder das erste Elternteil mit einem position: relative platziert.
Zweitens, wenn Sie ein Element in fixed ändern, reduziert es den Raum, in dem es sich befand, wodurch der Inhalt darunter verschoben wird. Wenn Sie möchten, dass der Effekt glatt erscheint, müssen Sie etwas an seine Stelle setzen, das den gleichen Platz belegt wie zuvor.
In meinem jsFiddle-Beispiel habe ich dies erreicht, indem ich das header-Element in ein anderes Element eingefügt und dann seine Höhe so eingestellt habe, dass sie (programmatisch) übereinstimmt. Es gibt verschiedene Möglichkeiten, dies zu erreichen.
Ich werde auch den folgenden Code einfügen, in meinem Beispiel verwende ich jQuery.
JavaScript:
%Vor%CSS:
%Vor%Beispiel HTML:
%Vor%Tags und Links javascript html css