Implémentation de l'affichage et du masquage de la navigation supérieure lorsque la page défile en fonction de jquery_jquery

L'exemple de cet article décrit l'implémentation jquery de l'affichage de navigation supérieur et du code d'effet caché lors du défilement de la page. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

Présentation des fichiers de base

<script src="js/jquery/1.11.1/jquery.min.js"></script>

Build html, margint est construit dans ce div pour apparaître la barre de défilement, cela n'a aucun effet pratique.

<div class="top-title">这是顶部导航条</div>
<div class="margint"><p>滚动看效果</p><p>滚动看效果</p></div>

Écrire du CSS

.top-title {background:#e74c3c;color:white;font-size:24px;padding:5px;text-align:center;position: fixed;left:0;top:0;width:100%;transition: top .5s;}
.hiddened{top: -90px;}
.showed{top:0;z-index: 9999;}

top-title définit la transition : top .5s ; fait référence au changement de la valeur de la direction supérieure de l'affichage de l'animation dans les limites de .5S. Par exemple, après avoir ajouté la classe cachée, le titre du haut sera animé de 0 à -90PX en 0,5 seconde.
Écrire du JS

$(function(){
  var winHeight = $(document).scrollTop();

  $(window).scroll(function() {
    var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少

    if (scrollY > 550){ //如果滚动距离大于550px则隐藏，否则删除隐藏类
      $('.top-title').addClass('hiddened');
    }
    else {
      $('.top-title').removeClass('hiddened');
    }

    if (scrollY > winHeight){ //如果没滚动到顶部，删除显示类，否则添加显示类
      $('.top-title').removeClass('showed');
    }
    else {
      $('.top-title').addClass('showed');
    }

   });
});

Ce qui précède est l'idée générale d'afficher et de masquer la navigation supérieure lors du défilement de la page basée sur jquery. J'espère que vous pourrez suivre cette idée pour compléter l'effet d'affichage et de masquage de la navigation. Merci d'avoir lu.