Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-10-31 14:00:02
Original
525 Leute haben es durchsucht

How to Make a Div Stick to the Top of the Screen After Scrolling Past It?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!