Comment rendre un Div collant lors du défilement : un guide sur le positionnement fixe et la gestion des événements ?

Sticky Div : s'accrocher au haut de l'écran lors du défilement

Imaginez avoir un div positionné près du haut de la page avec des boutons ou des commandes cruciaux. Lorsque l'utilisateur fait défiler verticalement, vous souhaitez que ce div le suive, en s'accrochant au haut de l'écran. Une fois de retour en haut, il devrait reprendre son emplacement d'origine.

Solution

La clé pour obtenir ce comportement est de rendre le div "collant" seulement après que l'utilisateur l'a fait défiler au-delà de la fenêtre d'affichage. Cela implique de définir sa position CSS sur fixe. Voici comment l'implémenter :

<code class="javascript">// Cache jQuery objects for efficiency.
const $window = $(window);
const $stickyEl = $('#the-sticky-div');
const elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>

Ce code attache un gestionnaire d'événements à l'événement de défilement de la fenêtre. Lorsqu'il est déclenché, il vérifie si la position de défilement actuelle a dépassé elTop (le décalage initial du div par rapport au haut). Si c'est vrai, cela ajoute une classe CSS nommée sticky au div, ce qui la fixe en haut de l'écran. Sinon, il supprime la classe, permettant au div de revenir à sa position d'origine.

La définition de classe CSS correspondante ressemblerait à ceci :

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

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!