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
DDDOriginal
2024-11-13 14:47:02445Durchsuche

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;   
  2. Fügen Sie einen Scroll-Ereignis-Listener hinzu:

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

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

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

    } else {                                   
        $('.fixme').css({                      
            position: 'static'
        });
    }

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!

Stellungnahme:
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