Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich einen scrollenden Div-Stick, nachdem ich ihn bestanden habe?

Wie erstelle ich einen scrollenden Div-Stick, nachdem ich ihn bestanden habe?

DDD
Freigeben: 2024-11-13 14:47:02
Original
419 Leute haben es durchsucht

How to Make a Scrolling Div Stick After Passing it?

Einen scrollenden Div-Stick erstellen

Müssen Sie ein bestimmtes Div stationär halten, nachdem Sie daran vorbei gescrollt haben? Hier erfahren Sie, wie Sie dies entweder mit CSS oder jQuery erreichen.

Nur-CSS-Ansatz

Seit den jüngsten Fortschritten kann diese Funktionalität allein mit CSS erreicht werden. Weitere Details finden Sie hier: [CSS-Only Fixed Div After Scrolling](https://stackoverflow.com/a/53832799/1482443).

jQuery-Ansatz

Wenn jQuery akzeptabel ist, versuchen Sie Folgendes:

  1. Definieren die Anfangsposition des Div:

    var fixmeTop = $('.fixme').offset().top;   
    Nach dem Login kopieren
  2. Fügen Sie einen Scroll-Ereignis-Listener hinzu:

    $(window).scroll(function() {  
    Nach dem Login kopieren
  3. Bestimmen Sie, ob die gescrollte Position überschritten wurde die anfängliche Div-Position:

    if (currentScroll >= fixmeTop) {
    Nach dem Login kopieren
  4. Wenden Sie eine feste Positionierung an, wenn Sie über das hinaus scrollen div:

        $('.fixme').css({                      
            position: 'fixed',
            top: '0',
            left: '0'
        });
    Nach dem Login kopieren
  5. Setzen Sie die Positionierung zurück, wenn über dem div gescrollt wird:

    } else {                                   
        $('.fixme').css({                      
            position: 'static'
        });
    }
    Nach dem Login kopieren

Für ein umfassenderes Verständnis schauen Sie sich dies an Live-Beispiel: [jQuery Fixed Div After Scrolling](http://jsfiddle.net/5n5MA/2/).

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen scrollenden Div-Stick, nachdem ich ihn bestanden 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage