jQuery - Empêche l'élément de défilement lorsque la fenêtre défile sans position fixe

Question

Je voudrais demander à propos de l'élément de défilement empêcher. J'ai un élément qui défile automatiquement lorsque la fenêtre défile et tous les sites Web ont cela, parce que c'est par défaut. Tout élément peut défiler lorsque la fenêtre défile, non? Maintenant, je veux empêcher que défilement automatique sur l'élément lorsque la fenêtre défile, mais je ne veux pas fixer cette position de l'élément à fixer. Comment je peux faire ça? Une idée ?

Par exemple:

$(window).scroll(function(){ 
     if($(this).scrollTop() == 100){ 
     $(element) // How to prevent scroll this element without position fixed ? 
     } 
    }); 

Answer 1

Il y a une nouvelle position appelée attribut de position CSS3: collant - qui, lorsqu'il est appliqué (vous ajoutez le décalage comme un attribut de données).

Lien de la note dev https://developer.mozilla.org/en-US/docs/Web/CSS/position

Lien de tours CSS https://css-tricks.com/position-sticky-2/

Donc, fondamentalement, lorsque vous faites défiler devant le décalage - l'élément est "collante". Cela a le même effet que l'application de la position: règle de style fixe mais sans réécrire le DOM. Il souffre du même problème que la position: fixe cependant en ce que vous devez appliquer un rembourrage sur le corps lorsque l'élément est "bloqué", car il sort du flux de la page et tous les éléments seront assis plus haut dans la page puisque l'élément n'est plus calculé en hauteur.

Mais le résultat est que vous pouvez appliquer la classe collante sans javascript/jquery et sans le coût du curseur sur la page.