Wie man ein Div beim Scrollen festhält: Eine Anleitung zur festen Positionierung und Ereignisbehandlung?

Sticky Div: Beim Scrollen am oberen Bildschirmrand hängen bleiben

Stellen Sie sich vor, Sie hätten ein Div mit wichtigen Schaltflächen oder Steuerelementen nahe am Seitenanfang positioniert. Wenn der Benutzer vertikal scrollt, soll dieses Div ihm folgen und sich am oberen Bildschirmrand festhalten. Bei der Rückkehr nach oben sollte es wieder an seiner ursprünglichen Position sein.

Lösung

Der Schlüssel zur Erzielung dieses Verhaltens besteht darin, das Div erst dann „klebrig“ zu machen, nachdem der Benutzer es über das Ansichtsfenster hinaus gescrollt hat. Dazu muss die CSS-Position auf „Fixed“ gesetzt werden. So implementieren Sie es:

<code class="javascript">// Cache jQuery objects for efficiency.
const $window = $(window);
const $stickyEl = $('#the-sticky-div');
const elTop = $stickyEl.offset().top;

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

Dieser Code fügt einen Event-Handler an das Scroll-Event des Fensters an. Beim Auslösen prüft es, ob die aktuelle Bildlaufposition elTop (den anfänglichen Versatz des Divs von oben) überschritten hat. Bei „true“ wird dem Div eine CSS-Klasse mit dem Namen „sticky“ hinzugefügt, wodurch es oben auf dem Bildschirm fixiert wird. Andernfalls wird die Klasse entfernt, sodass das Div an seine ursprüngliche Position zurückkehren kann.

Die entsprechende CSS-Klassendefinition würde so aussehen:

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

Das obige ist der detaillierte Inhalt vonWie man ein Div beim Scrollen festhält: Eine Anleitung zur festen Positionierung und Ereignisbehandlung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!