隐藏标题反应导航 - Javascript (1)

📌 相关文章

📜 隐藏标题反应导航 - Javascript (1)

📅 最后修改于: 2023-12-03 15:28:51.891000 🧑 作者: Mango

隐藏标题反应导航 - Javascript

本篇文章将为你介绍如何使用Javascript来实现一个隐藏标题反应导航的功能。所谓隐藏标题反应导航，就是当页面滚动时，根据当前浏览的位置，自动选中对应的导航条目。我们将使用一些基本的Javascript和CSS知识来实现这个功能。

准备工作

在开始之前，我们需要了解一些基本的知识和工具：

HTML：我们需要一个包含标题和导航条目的HTML文档。
CSS：我们需要对HTML文档进行一些基本的样式美化。
Javascript：我们需要使用Javascript来实现导航条目的选中和滚动效果。

HTML结构

下面是一个基本的HTML结构示例：

<!DOCTYPE html>
<html>
<head>
  <title>隐藏标题反应导航</title>
  <style>
    /* CSS样式 */
  </style>
</head>
<body>
  <!-- 导航条目 -->
  <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
      <li><a href="#section4">Section 4</a></li>
      <li><a href="#section5">Section 5</a></li>
    </ul>
  </nav>

  <!-- 标题 -->
  <section id="section1">
    <h1>Section 1</h1>
    <p>...</p>
  </section>

  <section id="section2">
    <h1>Section 2</h1>
    <p>...</p>
  </section>

  <section id="section3">
    <h1>Section 3</h1>
    <p>...</p>
  </section>

  <section id="section4">
    <h1>Section 4</h1>
    <p>...</p>
  </section>

  <section id="section5">
    <h1>Section 5</h1>
    <p>...</p>
  </section>

  <!-- Javascript代码 -->
</body>
</html>

在这个HTML结构中，我们有导航条目和各个标题（也就是section元素），并且每个标题都包含一个唯一的id属性，用于后面的Javascript代码中进行区分。

CSS样式

为了使导航条目和各个标题的样式更加美观，我们需要添加一些CSS样式：

/* 导航条目样式 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #eee;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

nav li {
  margin-right: 20px;
}

nav li:last-child {
  margin-right: 0;
}

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

/* 标题样式 */
section {
  padding-top: 100px;
  padding-bottom: 100px;
}

section h1 {
  font-size: 48px;
  margin-bottom: 40px;
}

在这些CSS样式中，我们设置了导航条目的位置、颜色和字体大小，以及各个标题的样式。

Javascript代码

接下来，我们将使用Javascript来实现导航条目的选中和滚动效果。

// 获取所有导航条目和各个标题的DOM元素
const navItems = document.querySelectorAll('nav a');
const sections = document.querySelectorAll('section');

// 监听窗口滚动事件
window.addEventListener('scroll', () => {
  // 获取当前窗口的滚动位置
  const scrollY = window.scrollY;

  // 遍历各个标题，找到当前所在位置的标题
  let currentSection = null;
  sections.forEach(section => {
    const sectionTop = section.offsetTop - 100;
    const sectionBottom = sectionTop + section.offsetHeight;

    if (scrollY >= sectionTop && scrollY < sectionBottom) {
      currentSection = section;
    }
  });

  // 遍历所有导航条目，将当前所在位置的条目设置为选中状态
  navItems.forEach(item => {
    if (item.hash === '#' + currentSection.getAttribute('id')) {
      item.classList.add('active');
    } else {
      item.classList.remove('active');
    }
  });
});

在这段Javascript代码中，我们首先获取了所有导航条目和各个标题的DOM元素，然后在窗口滚动事件中监听窗口滚动位置。每次滚动时，我们都遍历各个标题，找到当前所在位置的标题，并将这个标题对应的导航条目设置为选中状态。

结语

到此为止，我们已经实现了一个基本的隐藏标题反应导航功能。在实际应用中，你可以根据自己的需要调整样式和Javascript代码逻辑，来实现更加完美的效果。