Comment afficher une division lors d'un défilement vers le bas après 800 pixels et la masquer lors d'un défilement vers le haut ?

Afficher la div lors du défilement vers le bas après une visite de 800 px

Dans cette discussion revisitée, nous visons à affiner notre approche pour afficher une div cachée lors du défilement vers le bas. après 800px de la page top.

Solution :

Nous utilisons une solution simple utilisant la fonction $(document).scroll() de JavaScript, comme suit :

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

Explication :

1. scrollTop récupère la position actuelle de défilement vertical du page.
2. Si scrollTop dépasse 800 pixels, le div bottomMenu est rendu visible à l'aide de fadeIn().
3. À l'inverse, si scrollTop tombe en dessous de 800 pixels, bottomMenu est masqué à l'aide de fadeOut().

Amélioration du défilement Haut :

Pour améliorer cette solution, nous pouvons ajouter une fonctionnalité permettant de masquer bottomMenu lors du défilement vers le haut et que la hauteur de défilement est inférieure à 800 px :

if (y < 800 && $('.bottomMenu').css('display') !== 'none') {
    $('.bottomMenu').fadeOut();
}

Cette condition supplémentaire garantit que bottomMenu reste masqué lors du défilement vers le haut et la hauteur de défilement est inférieure à 800 px.

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!