Maison > interface Web > js tutoriel > Comment faire en sorte qu'un Div colle en haut de l'écran lors du défilement ?

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

DDD
Libérer: 2024-11-10 20:54:02
original
184 Les gens l'ont consulté

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

Épingler un div en haut de l'écran

Pour obtenir l'effet souhaité, positionnez le div sous un autre contenu et définissez sa position initiale à l'absolu ou au relatif. Une fois que la page a suffisamment défilé pour que le bord supérieur du div s'aligne avec la fenêtre d'affichage, modifiez la position sur fixe et réinitialisez la valeur supérieure à zéro.

CSS :

.sticky-div {
    position: absolute;
    top: initial;
    width: 100%;
}

.sticky-div.fixed {
    position: fixed;
    top: 0;
}
Copier après la connexion

JavaScript (jQuery) :

$(window).scroll(function() {
    var div = $('.sticky-div'),
        scrollTop = $(this).scrollTop();

    if (scrollTop > 200) {
        div.addClass('fixed');
    } else {
        div.removeClass('fixed');
    }
});
Copier après la connexion

Lorsque le scrollTop dépasse 200, le div devient fixe et défile avec la fenêtre. Le défilement vers le haut supprime la classe fixe et rétablit 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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal