Wie kann man beim Scrollen ein Div am oberen Rand der Seite „kleben“ lassen?

Div beim vertikalen Scrollen am oberen Bildschirmrand positionieren

Frage:

Wie kann ich das machen? Ein Div „bleibt“ oben auf einer Webseite, wenn ein Benutzer daran vorbeiscrollt? Nachdem ich zum Seitenanfang zurückgekehrt bin, möchte ich, dass das Div an seiner ursprünglichen Position wiederhergestellt wird.

Lösung:

Der Schlüssel zu dieser Funktionalität ist das Festlegen von „position:fixed“ auf der Seite div erst, nachdem der Benutzer darüber gescrollt hat. Um dies zu erreichen, können wir einen Handler verwenden, der an das window.scroll-Ereignis angehängt ist:

<code class="javascript">// Cache selectors for improved performance
var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>

Dieser Code fügt dem div eine Sticky-CSS-Klasse hinzu, wenn die Seite daran vorbeiscrollt, und entfernt die Klasse, wenn die Seite zurückkehrt nach oben. Die CSS-Klasse ist wie folgt definiert:

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

Wenn die Sticky-Klasse hinzugefügt wird, nimmt das Div eine feste Position ein und bleibt am oberen Bildschirmrand. Es kehrt an seine ursprüngliche Position zurück, wenn die Klasse entfernt wird.

Hinweis: Der Code wurde optimiert, um jQuery-Objekte für eine verbesserte Leistung zwischenzuspeichern.

Das obige ist der detaillierte Inhalt vonWie kann man beim Scrollen ein Div am oberen Rand der Seite „kleben“ lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!