纯js右侧导航栏

纯JavaScript实现的右侧导航栏是一种常见的网页设计元素，它允许用户通过点击或滚动页面来快速导航到不同的部分。以下是关于纯JavaScript右侧导航栏的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

右侧导航栏通常是一个固定在页面右侧的侧边栏，包含指向页面不同部分的链接。它可以手动控制显示和隐藏，也可以根据用户的滚动行为自动更新当前激活的链接。

优势

用户体验：提供直观的导航方式，帮助用户快速定位信息。
灵活性：可以根据需要自定义样式和功能。
响应式设计：适应不同屏幕尺寸，确保在移动设备上也能良好工作。

类型

固定式：始终显示在页面右侧，不随滚动条移动。
滚动式：随着页面滚动而上下移动，但保持在视口内。
可折叠式：可以通过按钮展开或收起。

应用场景

长文档或文章：如技术手册、白皮书等。
电商网站：产品分类导航。
企业官网：服务介绍或团队成员列表。

示例代码

以下是一个简单的纯JavaScript实现的固定式右侧导航栏示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右侧导航栏示例</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background-color: #f4f4f4;
    padding: 20px;
    box-sizing: border-box;
  }
  .sidebar a {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333;
  }
  .sidebar a.active {
    color: #007bff;
  }
</style>
</head>
<body>
<div class="sidebar">
  <a href="#section1" onclick="highlightLink(event)">Section 1</a>
  <a href="#section2" onclick="highlightLink(event)">Section 2</a>
  <a href="#section3" onclick="highlightLink(event)">Section 3</a>
</div>

<div id="section1" style="height: 100vh; background-color: #ddd;">Section 1</div>
<div id="section2" style="height: 100vh; background-color: #eee;">Section 2</div>
<div id="section3" style="height: 100vh; background-color: #fff;">Section 3</div>

<script>
function highlightLink(event) {
  event.preventDefault();
  const links = document.querySelectorAll('.sidebar a');
  links.forEach(link => link.classList.remove('active'));
  event.target.classList.add('active');
}
window.addEventListener('scroll', () => {
  const sections = document.querySelectorAll('div[id^="section"]');
  let current = '';
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    if (pageYOffset >= sectionTop - 100) {
      current = section.getAttribute('id');
    }
  });
  const links = document.querySelectorAll('.sidebar a');
  links.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href').substring(1) === current) {
      link.classList.add('active');
    }
  });
});
</script>
</body>
</html>