Heim  >  Artikel  >  Web-Frontend  >  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:02359Durchsuche

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;   
  2. Add a scroll event listener:

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

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

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

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

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!

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