Maison > interface Web > tutoriel CSS > le corps du texte

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

Mary-Kate Olsen
Libérer: 2024-10-30 06:31:02
original
906 Les gens l'ont consulté

How to Make a Div Stick to the Top of the Screen While Scrolling?

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>
Copier après la connexion

Classe CSS :

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>
Copier après la connexion

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!

source:php.cn
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!