发挥windowScroll优势，打造灵动导航列表

2023-12-21 14:33:36

windowScroll作为一项强大的工具，能够让网站实现灵活的滚动效果，为用户提供良好的交互体验。本文将介绍如何利用windowScroll来制作一个灵动的导航列表，助力提升网站的易用性和美观度。

1. HTML 结构搭建

首先，我们需要构建导航列表的HTML结构，代码如下：

<div id="navigation">
  <ul>
    <li><a href="#section1">首页</a></li>
    <li><a href="#section2">关于我们</a></li>
    <li><a href="#section3">产品</a></li>
    <li><a href="#section4">联系我们</a></li>
  </ul>
</div>

2. CSS 样式调整

接下来，我们需要为导航列表添加CSS样式来美化外观，代码如下：

#navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 99;
}

#navigation ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

#navigation li {
  margin-right: 20px;
}

#navigation a {
  color: #000;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

#navigation a:hover {
  color: #f00;
}

3. JavaScript 代码实现

然后，我们需要添加JavaScript代码来实现滚动效果和导航条激活功能，代码如下：

// 获取导航列表元素
const navigation = document.getElementById("navigation");

// 获取所有导航项元素
const navItems = document.querySelectorAll("#navigation li");

// 获取所有锚点元素
const sections = document.querySelectorAll("section");

// 监听窗口滚动事件
window.addEventListener("scroll", function () {
  // 获取滚动条距离顶部的高度
  const scrollTop = window.pageYOffset;

  // 遍历所有锚点元素
  for (let i = 0; i < sections.length; i++) {
    // 获取锚点元素距离顶部的高度
    const sectionTop = sections[i].offsetTop;

    // 判断滚动条是否到达锚点元素
    if (scrollTop >= sectionTop - 100) {
      // 激活对应的导航项
      navItems[i].classList.add("active");
    } else {
      // 取消激活对应的导航项
      navItems[i].classList.remove("active");
    }
  }
});