Comment créer un Sticky Div qui s'affiche en haut de l'écran lors du défilement ?

Création d'un Div collant qui s'affiche en haut de l'écran

Problème :

Vous cherchez initialement à créer un div qui reste sous un bloc de contenu. Cependant, lorsque vous faites défiler la page et atteignez la limite supérieure du div, elle devient fixe et défile le long de la page.

Résolution :

Utilisation de CSS avec un attribut de positionnement fixe atteint le résultat souhaité fonctionnalité :

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Modifier :

Pour garantir que le div reste collant, il doit initialement avoir un positionnement absolu. Une fois le décalage de défilement atteint, le positionnement devient fixe, la position supérieure étant définie sur zéro.

Détectez le décalage de défilement supérieur du document à l'aide de la fonction scrollTop :

$(window).scroll(function(e) {
    var $el = $('.fixedElement');
    var isPositionFixed = ($el.css('position') == 'fixed');
    if ($(this).scrollTop() > 200 && !isPositionFixed) {
        $el.css({'position': 'fixed', 'top': '0px'});
    }
    if ($(this).scrollTop() < 200 && isPositionFixed) {
        $el.css({'position': 'static', 'top': '0px'});
    }
});

Lorsque le défilement offset atteint 200, l'élément devient fixe et colle en haut de la fenêtre du navigateur.

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!