Maison > interface Web > tutoriel CSS > Comment créer un Div Stick défilant après l'avoir passé ?

Comment créer un Div Stick défilant après l'avoir passé ?

DDD
Libérer: 2024-11-13 14:47:02
original
466 Les gens l'ont consulté

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;   
    Copier après la connexion
  2. Add a scroll event listener:

    $(window).scroll(function() {  
    Copier après la connexion
  3. Determine if the scrolled position has passed the initial div position:

    if (currentScroll >= fixmeTop) {
    Copier après la connexion
  4. Apply fixed positioning when scrolled past the div:

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

    } else {                                   
        $('.fixme').css({                      
            position: 'static'
        });
    }
    Copier après la connexion

For a more comprehensive understanding, check out this live example: [jQuery Fixed Div After Scrolling](http://jsfiddle.net/5n5MA/2/).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal