Comment afficher et masquer une division en fonction de la position de défilement ?

Afficher le div caché après un défilement de 800 px depuis le haut

Scénario :

Vous souhaitez révéler un div caché après l'utilisateur fait défiler la page de 800 pixels. De plus, lorsque l'utilisateur fait défiler vers le haut et que la hauteur est inférieure à 800 px, le div devrait disparaître.

Structure HTML :

<div class="bottomMenu">
  <!-- Content -->
</div>

CSS :

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

JavaScript (jQuery) :

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

Explication :

Ce script surveille la position de défilement du document. Lorsque la position de défilement devient supérieure à 800 pixels, elle déclenche l'animation de fondu entrant pour le div .bottomMenu. À l’inverse, lorsque la position de défilement descend en dessous de 800 pixels, cela déclenche l’animation de fondu sortant.

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!