Comment pouvez-vous vous assurer qu'un div reste fixe après y avoir fait défiler, malgré sa position initiale ?

Réparer un div après l'avoir fait défiler

Problème : Comment pouvez-vous vous assurer qu'un div reste corrigé après le défilement à lui, malgré sa position initiale sur le page ?

Solution :

Pour y parvenir, il existe deux approches principales :

1. CSS uniquement Méthode :

   • Utiliser la position CSS : propriété fixe après avoir fait défiler jusqu'à la propriété souhaitée position.
   • Cette solution est disponible dans les navigateurs modernes (voir https://stackoverflow.com/a/53832799/1482443 pour plus de détails).

2. Méthode jQuery :

   • Écoutez l'événement de défilement en utilisant jQuery.
   • Déterminez la position initiale du div souhaité à l'aide de la méthode offset().top.
   • Appliquer la position : style fixe si la position de défilement dépasse la position initiale du div et revenir à la position : statique sinon . Voici le code jQuery :

var fixmeTop = $('.fixme').offset().top;

$(window).scroll(function() {

    var currentScroll = $(window).scrollTop();

    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }

});

Avec l'une ou l'autre approche, vous pouvez effectivement corriger un div après y avoir fait défiler. N'oubliez pas de prendre en compte la prise en charge du navigateur lorsque vous choisissez entre les deux méthodes.

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!