如何使用 JavaScript 实现网页顶部固定导航栏的收缩效果？-js教程-PHP中文网

如何使用 JavaScript 实现网页顶部固定导航栏的收缩效果？

王林

发布： 2023-10-21 10:58:48

原创

1073人浏览过

如何使用 javascript 实现网页顶部固定导航栏的收缩效果？

如何使用 JavaScript 实现网页顶部固定导航栏的收缩效果？

在现代网页设计中，固定导航栏已经成为了一个常见的设计元素。当用户滚动页面时，固定导航栏可以一直保持在页面顶部，使得用户可以方便地浏览网页的不同部分。而为了提升用户体验，有时我们希望在页面向下滚动时，固定导航栏能够收缩起来，以节省页面空间。本文将介绍如何使用 JavaScript 实现这一效果。

首先，在 HTML 文件中添加一个固定导航栏的容器，可以使用 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 样式使导航栏固定在页面的顶部，并设置初始高度和过渡效果：

立即学习“Java免费学习笔记（深入）”；

#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 类名，导航栏恢复初始样式。

最后，在页面中引入所写的 JavaScript 代码：