Maison > interface Web > tutoriel CSS > Comment puis-je afficher un Div après avoir fait défiler 800 pixels vers le bas ?

Comment puis-je afficher un Div après avoir fait défiler 800 pixels vers le bas ?

Linda Hamilton
Libérer: 2024-12-30 20:16:09
original
1089 Les gens l'ont consulté

How Can I Show a Div After Scrolling Down 800 Pixels?

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

Scénario :
Vous avez besoin qu'un div masqué apparaisse lors du défilement vers le bas à au moins 800 pixels du haut de la page. Pour y parvenir, un exemple existant nécessite des modifications.

Solution :

Pour répondre à votre demande, modifiez le code jQuery comme suit :

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});
Copier après la connexion

Explication :

  • L'écouteur d'événement scroll() surveille le défilement de la page position.
  • Lors d'un défilement au-delà de 800 pixels (y > 800), le div .bottomMenu devient visible à l'aide de fadeIn().
  • Lors d'un défilement vers une hauteur inférieure à 800 pixels (y < 800), le div disparaît en utilisant fadeOut().

Exemple :

<!-- HTML -->
<div class="bottomMenu">
  <!-- content -->
</div><pre class="brush:php;toolbar:false"><!-- CSS -->
.bottomMenu {
    display: none;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0;
    z-index: 100;
}
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal