Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit jQuery das Scrollen eines Elements mit fester Position an einem bestimmten Punkt stoppen?

Wie kann ich mit jQuery das Scrollen eines Elements mit fester Position an einem bestimmten Punkt stoppen?

Patricia Arquette
Freigeben: 2024-12-18 19:23:09
Original
799 Leute haben es durchsucht

How to Stop Scrolling a Fixed-Position Element at a Specific Point Using jQuery?

So stoppen Sie das Scrollen an einer festen Position

Sie möchten, dass ein Element mit fester Positionierung mit der Seite scrollt, bis es einen bestimmten Punkt erreicht (z. B. 250 Pixel vom Seite oben), danach sollte das Scrollen aufhören. Lassen Sie uns in eine Lösung mit jQuery eintauchen.

jQuery-Implementierung

Der folgende Code erreicht, was Sie anstreben:

$(window).scroll(function() {
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
Nach dem Login kopieren

In diesem Code:

  • $(window).scroll(function() { ... }) bindet einen Ereignis-Listener an den Bildlauf des Fensters Ereignis.
  • Wenn die Seite gescrollt wird, berechnet der Code die neue Position für das Element mit der ID #theFixed.
  • Math.max(0, 250 - $(this).scrollTop( )) stellt sicher, dass das Element vom oberen Rand des Elements nicht über 0 Pixel oder unter 250 Pixel liegt Seite.
  • $(#theFixed).css("top", ...) legt die neue obere Position für das feste Element fest.

Implementierungsbeispiel

Die folgende Geige zeigt, wie es funktioniert:

[JS Fiddle](Geigen-URL hier einfügen)

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery das Scrollen eines Elements mit fester Position an einem bestimmten Punkt stoppen?. 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