使用 HTML、CSS 和 JavaScript 在 Scroll 上向下滑动导航栏

在网页设计中，一个简洁美观、功能完善的导航栏可以提升用户体验和网站质量。在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 在 Scroll 上向下滑动导航栏。

1. 实现效果

在本教程中，我们将实现一个网站顶部固定的导航栏，当用户向下滚动页面时，导航栏将由顶部自动吸附至网站顶部，提高用户体验和访问效率。

2. 实现方案

实现该效果需要以下步骤：

• HTML 布局（定义导航栏结构）
• CSS 样式（定义导航栏样式）
• JavaScript 代码（实现导航栏自动吸附功能）

2.1 HTML 布局

导航栏的 HTML 结构可以采用有序列表，如下所示：

<header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

本例中，导航栏使用 header 标签包含 nav 标签，ul 即为导航栏的有序列表，每个 li 标签即为一个导航栏链接。

2.2 CSS 样式

我们为导航栏添加基础样式，并在滚动时添加吸附样式。CSS 代码如下所示：

/* 导航栏样式 */
header {
  width: 100%;
  height: 70px;
  background-color: #fff;
  border-bottom: 1px solid #dfdfdf;
  position: fixed;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease-in-out;
}

/* 导航栏链接样式 */
header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

header nav a {
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  color: #666;
  padding: 0 20px;
  transition: color 0.3s ease-in-out;
}

/* 滚动吸附样式 */
header.scrolled {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #dfdfdf;
}

header.scrolled a {
  color: #333;
}

本例中，我们设置导航栏为固定定位，top 设置为 0，此处使用 z-index 属性设置导航栏的层级，负责滑动吸附效果的实现。另外，我们为导航栏添加普通和滑动吸附两种状态下的样式，并使用 CSS3 的 transition 属性实现了背景色和文字颜色渐变变化的效果。

2.3 JavaScript 代码

我们需要编写 JavaScript 代码，判断用户滚动高度，根据高度值来切换导航栏普通状态和吸附状态。请看 JavaScript 代码：

// 监听 window 滚动事件
window.addEventListener("scroll", function() {
  // 如果滚动高度超过 70px
  if (window.scrollY > 70) {
    // 添加 .scrolled 样式
    document.querySelector("header").classList.add("scrolled");
  } else {
    // 否则移除 .scrolled 样式
    document.querySelector("header").classList.remove("scrolled");
  }
});

在代码中，我们通过 window.scrollY 获取当前页面滚动的高度，如果高度大于 70px，则将导航栏添加 .scrolled 样式，否则移除该样式，实现导航栏的普通和吸附两种状态的切换。

3. 结论

通过 HTML、CSS 和 JavaScript 的结合使用，我们可以实现具有吸附功能的顶部固定导航栏，提升用户体验和网站质量。