Wie halte ich ein Div am oberen Bildschirmrand fest, nachdem ich daran vorbei gescrollt habe?

Ein Div am oberen Bildschirmrand verankern, wenn darüber gescrollt wird

Bei der Entwicklung interaktiver Webseiten ist es oft wünschenswert, Elemente zu haben, die den Elementen des Benutzers folgen Scrollen Sie, insbesondere wenn Sie bestimmte Abschnitte erreichen. Ein solches Szenario beinhaltet ein Div, das oben auf der Seite positioniert ist, aber beim Vorbeiscrollen am Bildschirm „haften“ sollte.

Lösung

Um diesen Effekt zu erzielen, ist eine kreative Kombination erforderlich Es kommen JavaScript und CSS zum Einsatz. Ein position:fixed-Stil wird auf das Div angewendet, jedoch erst, nachdem der Benutzer daran vorbei gescrollt hat.

So erreichen Sie das:

<code class="javascript">// Cache jQuery objects 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 JavaScript-Code fügt einen Ereignishandler zum hinzu window.scroll-Ereignis, das die Bildlaufposition überwacht. Wenn der Bildlauf die Anfangsposition des div (elTop) überschreitet, wird ihm eine „sticky“ CSS-Klasse hinzugefügt. Diese Klasse enthält die folgenden CSS-Stile:

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

Dadurch nimmt das Div eine feste Position ein und bleibt am oberen Rand der Seite, solange darüber gescrollt wird. Wenn der Benutzer zurück nach oben scrollt, wird die Sticky-Klasse entfernt und das Div kehrt an seine ursprüngliche Position zurück.

Diese Lösung kombiniert die Leistungsfähigkeit von JavaScript und CSS, um durch Beibehaltung ein reaktionsfähiges und benutzerfreundliches Erlebnis zu schaffen Wichtige Elemente in Reichweite, unabhängig von der Scrollposition der Seite.

Das obige ist der detaillierte Inhalt vonWie halte ich ein Div am oberen Bildschirmrand fest, nachdem ich daran vorbei gescrollt habe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!