Beim Scrollen ein Div oben auf dem Bildschirm beibehalten
In bestimmten Szenarien ist es wünschenswert, dass ein Div oben auf dem Bildschirm bleibt Bildschirm, wenn ein Benutzer daran vorbeiscrollt und ihm so quasi „folgt“, während er auf einer Webseite navigiert. Dieses Verhalten stellt sicher, dass wesentliche Elemente wie Schaltflächen oder Navigationssteuerelemente weiterhin leicht zugänglich bleiben.
Um diesen Effekt zu erzielen, können Sie die folgende Strategie anwenden:
JavaScript-Code:
<code class="js">// Cache jQuery objects for performance optimization.
var $window = $(window),
$stickyEl = $('#the-sticky-div'),
elTop = $stickyEl.offset().top;
// Attach a handler to the window's scroll event.
$window.scroll(function() {
// Determine if the div has been scrolled past.
if ($window.scrollTop() > elTop) {
// Add a CSS class to make the div sticky.
$stickyEl.addClass('sticky');
} else {
// Remove the sticky class when the user scrolls back up.
$stickyEl.removeClass('sticky');
}
});</code>CSS-Klasse:
<code class="css">#the-sticky-div.sticky {
position: fixed;
top: 0;
}</code>Erklärung:
Der JavaScript-Code speichert zunächst jQuery-Objekte für zwischen bessere Leistung. Anschließend wird dem Fenster ein Scroll-Ereignis-Listener hinzugefügt, der immer dann ausgelöst wird, wenn der Benutzer vertikal scrollt. Innerhalb des Listeners prüft es, ob am Div vorbei gescrollt wurde, indem es die Bildlaufposition des Fensters mit dem Versatz des Div vom oberen Rand der Seite vergleicht. Wenn die Bildlaufposition größer als der Offset ist, wird dem div eine Sticky-CSS-Klasse hinzugefügt, die seine Position auf „fixed“ setzt und sie oben auf dem Bildschirm platziert. Wenn der Benutzer umgekehrt einen Bildlauf nach oben durchführt und die Bildlaufposition kleiner als der Offset ist, wird die Sticky-Klasse entfernt und das Div an seine ursprüngliche Position zurückgebracht.
Das obige ist der detaillierte Inhalt vonWie halte ich ein Div beim Scrollen am oberen Bildschirmrand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
