Wie kann ich beim Scrollen daran vorbei ein Div am oberen Bildschirmrand „kleben“ lassen?

So halten Sie ein Div am oberen Bildschirmrand fixiert, wenn Sie daran vorbeiscrollen

Problem:

Sie haben ein Div, das zunächst 100 Pixel vom oberen Rand der Seite entfernt liegt und wichtige Schaltflächen oder Steuerelemente enthält. Wenn der Benutzer über dieses Div hinaus nach unten scrollt, soll es für einen einfachen Zugriff am oberen Bildschirmrand „kleben“. Wenn der Benutzer wieder nach oben scrollt, soll er an seine ursprüngliche Position zurückkehren.

Lösung:

Das Geheimnis liegt darin, die Eigenschaft „position:fixed“ zu verwenden, aber erst danach Der Benutzer hat über das Div hinaus gescrollt. So erreichen Sie dies:

JavaScript:

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

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

Dieser Code erfasst das Scroll-Ereignis des Fensters und wendet dynamisch eine „Sticky“-CSS-Klasse an, wenn der Benutzer vorbeiscrollt am oberen Rand des Div.

CSS:

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

Dieses CSS legt die „Sticky“-Klasse fest, damit das Div am oberen Rand des Bildschirms haftet. Standardmäßig platziert position:fixed das Div relativ zum Fenster und stellt sicher, dass es beim Scrollen oben bleibt.

So funktioniert es:

Wenn die Seite geladen wird, Das Div wird 100 Pixel von oben positioniert. Während der Benutzer nach unten scrollt, prüft das JavaScript, ob die aktuelle Scrollposition die ursprüngliche obere Position des Div überschreitet. Wenn dies der Fall ist, wird die Klasse „sticky“ auf das Div angewendet, wodurch es am oberen Bildschirmrand fixiert wird. Wenn der Benutzer wieder nach oben scrollt, wird der Vorgang umgekehrt und die „Sticky“-Klasse wird entfernt, sodass das Div seine ursprüngliche Position wieder einnehmen kann.

Zusammenfassend lässt sich sagen, dass diese Lösung ein Div effektiv daran „klammert“. oben auf dem Bildschirm angezeigt, wenn ein Benutzer daran vorbeiscrollt, während es ermöglicht, an seine ursprüngliche Position zurückzukehren, wenn der Benutzer wieder nach oben scrollt.

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