Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

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

How to Make a Scrolling Div Stick After Passing it?

Making a Scrolling Div Stick

Need to keep a specific div stationary after scrolling past it? Here's how to achieve that using either CSS or jQuery.

CSS-Only Approach

As of recent advancements, CSS alone can accomplish this functionality. More details can be found here: [CSS-Only Fixed Div After Scrolling](https://stackoverflow.com/a/53832799/1482443).

jQuery Approach

If jQuery is acceptable, try this:

  1. Define the initial position of the div:

    var fixmeTop = $('.fixme').offset().top;   
    Nach dem Login kopieren
  2. Add a scroll event listener:

    $(window).scroll(function() {  
    Nach dem Login kopieren
  3. Determine if the scrolled position has passed the initial div position:

    if (currentScroll >= fixmeTop) {
    Nach dem Login kopieren
  4. Apply fixed positioning when scrolled past the div:

        $('.fixme').css({                      
            position: 'fixed',
            top: '0',
            left: '0'
        });
    Nach dem Login kopieren
  5. Reset the positioning when scrolled above the div:

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

For a more comprehensive understanding, check out this live example: [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