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

É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;
}

JavaScript (jQuery) :

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

    if (scrollTop > 200) {
        div.addClass('fixed');
    } else {
        div.removeClass('fixed');
    }
});

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!