Comment afficher un Div lors d'un défilement après 800 px ?

Afficher le div lors du défilement vers le bas après 800 px

Introduction

Cet article abordera le problème de l'affichage d'un div caché lors du défilement vers le bas au-delà d'un point spécifié sur une page Web. L'objectif est d'y parvenir une fois que l'utilisateur a fait défiler 800 pixels à partir du haut de la page, tout en garantissant que le div est masqué lors du défilement vers le haut et que la hauteur de défilement est inférieure à 800 pixels.

Structure HTML

Le HTML du div en question est le suivant :

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

CSS Style

Le CSS suivant est appliqué au div :

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

Script jQuery

Script jQuery initialement fourni :

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

Script jQuery révisé pour la fonctionnalité souhaitée

Pour obtenir la fonctionnalité souhaitée, le script jQuery doit être modifié comme suit :

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

Conclusion

Ce script jQuery révisé affichera le div après avoir fait défiler plus de 800 pixels à partir du haut de la page. Lors du défilement vers le haut et que la hauteur de défilement est inférieure à 800 pixels, le div sera masqué.

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!