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

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

Question :

Comment puis-je créer un des div cachés apparaissent après avoir fait défiler 800 pixels depuis le haut de la page ? Lors du défilement vers le haut et que la hauteur est inférieure à 800 px, le div devrait disparaître.

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;
}

Variante jQuery pour le défilement 800px :

Ce code jQuery affichera le div après un défilement vers le bas de 800 px :

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

Variante d'événement de défilement pour se cacher lors du défilement vers le haut :

Pour masquer le div lors du défilement vers le haut et que la hauteur est inférieure à 800 px, utilisez ceci code :

$(document).scroll(function() {
  var height = $(window).scrollTop();

  if (height > 800) {
    $('.bottomMenu').css({
      display: 'block',
      opacity: 1
    });
  } else {
    $('.bottomMenu').css({
      display: 'none',
      opacity: 0
    });
  }
});

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!