Comment utiliser JavaScript pour obtenir l'effet de réduction de la barre de navigation fixe en haut de la page Web ?

Comment utiliser JavaScript pour obtenir l'effet de réduction de la barre de navigation fixe en haut de la page Web ?

Dans la conception Web moderne, les barres de navigation fixes sont devenues un élément de conception courant. Lorsque les utilisateurs font défiler la page, la barre de navigation fixe peut rester en haut de la page, permettant aux utilisateurs de parcourir facilement les différentes parties de la page Web. Afin d'améliorer l'expérience utilisateur, nous souhaitons parfois que la barre de navigation fixe se rétrécisse lorsque la page défile vers le bas pour économiser de l'espace sur la page. Cet article explique comment obtenir cet effet à l'aide de JavaScript.

Tout d'abord, ajoutez un conteneur pour la barre de navigation fixe dans le fichier HTML. Vous pouvez utiliser l'élément nav pour y parvenir : nav 元素来实现：

<nav id="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

接下来，添加 CSS 样式使导航栏固定在页面的顶部，并设置初始高度和过渡效果：

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  transition: height 0.3s ease-in-out;
  height: 60px; /* 初始高度 */
  z-index: 9999;
}

#navbar.shrink {
  height: 40px; /* 收缩后的高度 */
}

在 JavaScript 中实现导航栏的收缩效果主要是通过监听页面滚动事件来控制导航栏的样式。

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var scrollPosition = window.pageYOffset;

  if (scrollPosition > 100) { // 根据具体需求调整滚动位置的阀值
    navbar.classList.add('shrink');
  } else {
    navbar.classList.remove('shrink');
  }
});

在上述代码中，我们使用 window.addEventListener 监听 scroll 事件，当页面滚动时触发回调函数。在回调函数中，我们首先获取导航栏的元素，并使用 window.pageYOffset 获取滚动的垂直偏移量。根据具体需求，可以调整判断导航栏收缩的滚动位置阀值。

当页面滚动的垂直偏移量超过阀值时，我们添加 shrink 类名到导航栏元素上，触发 CSS 中定义的收缩样式。当滚动回到阀值以下时，我们移除 shrink

<script src="script.js"></script>

Ensuite, ajoutez un style CSS pour fixer la barre de navigation. en haut de la page, et définissez la hauteur initiale et l'effet de transition :

rrreee

L'implémentation de l'effet de rétrécissement de la barre de navigation en JavaScript consiste principalement à contrôler le style de la barre de navigation en écoutant l'événement de défilement de page.

rrreee

Dans le code ci-dessus, nous utilisons window.addEventListener pour écouter l'événement scroll et déclencher la fonction de rappel lorsque la page défile. Dans la fonction de rappel, nous récupérons d'abord l'élément de la barre de navigation et utilisons window.pageYOffset pour obtenir le décalage vertical du défilement. Selon des besoins spécifiques, le seuil de position de défilement permettant de juger du rétrécissement de la barre de navigation peut être ajusté. 🎜🎜Lorsque le décalage vertical du défilement de la page dépasse le seuil, nous ajoutons le nom de la classe shrink à l'élément de la barre de navigation pour déclencher le style de réduction défini en CSS. Lorsque le défilement revient en dessous du seuil, nous supprimons le nom de la classe shrink et la barre de navigation revient à son style d'origine. 🎜🎜Enfin, introduisez le code JavaScript écrit dans la page : 🎜rrreee🎜Voici les étapes spécifiques et les exemples de code pour utiliser JavaScript afin d'obtenir l'effet de réduction de la barre de navigation fixe en haut de la page Web. En écoutant les événements de défilement, nous pouvons modifier dynamiquement le style de la barre de navigation en fonction de la position de défilement de la page pour obtenir un effet de rétrécissement. De cette façon, les utilisateurs bénéficieront d’une meilleure expérience lors de la navigation sur le Web et pourront également économiser de l’espace sur les pages. 🎜

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!