Comment faire en sorte qu'un Div colle en haut de l'écran pendant le défilement ?

Maintenir un div en haut de l'écran pendant le défilement

Dans certains scénarios, il est souhaitable qu'un div s'accroche en haut du écran lorsqu'un utilisateur le fait défiler vers le bas, le « suivant » efficacement lorsqu'il navigue sur une page Web. Ce comportement garantit que les éléments essentiels, tels que les boutons ou les commandes de navigation, restent facilement accessibles.

Pour obtenir cet effet, vous pouvez utiliser la stratégie suivante :

Code JavaScript :

<code class="js">// Cache jQuery objects for performance optimization.
var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

// Attach a handler to the window's scroll event.
$window.scroll(function() {
    // Determine if the div has been scrolled past.
    if ($window.scrollTop() > elTop) {
        // Add a CSS class to make the div sticky.
        $stickyEl.addClass('sticky');
    } else {
        // Remove the sticky class when the user scrolls back up.
        $stickyEl.removeClass('sticky');
    }
});</code>

Classe CSS :

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

Explication :

Le code JavaScript met initialement en cache les objets jQuery pour de meilleures performances. Il ajoute ensuite un écouteur d'événement de défilement à la fenêtre, qui est déclenché chaque fois que l'utilisateur fait défiler verticalement. Dans l'écouteur, il vérifie si le div a défilé en comparant la position de défilement de la fenêtre avec le décalage du div par rapport au haut de la page. Si la position de défilement est supérieure au décalage, une classe CSS collante est ajoutée au div, qui définit sa position sur fixe et la place en haut de l'écran. À l'inverse, lorsque l'utilisateur fait défiler vers le haut et que la position de défilement est inférieure au décalage, la classe collante est supprimée, ramenant le div à sa position d'origine.

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!