react侧边栏滚动导航

你可以使用React和CSS来实现一个侧边栏滚动导航。首先，你需要创建一个包含导航链接的侧边栏组件。然后，使用CSS来设置侧边栏的样式和位置。最后，在React中实现滚动事件，以便在用户滚动页面时，高亮显示当前所在的导航链接。

下面是一个简单的示例代码，可以让你更好地理解如何实现侧边栏滚动导航。

import React, { useState, useEffect } from 'react';
import './styles.css';

function Sidebar() {
  const [activeLink, setActiveLink] = useState('');

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollPos = window.pageYOffset;
      const links = document.querySelectorAll('.sidebar a');
      const headerHeight = document.querySelector('.header').offsetHeight;

      links.forEach(link => {
        const section = document.querySelector(link.hash);
        if (
          section.offsetTop <= currentScrollPos + headerHeight &&
          section.offsetTop + section.offsetHeight > currentScrollPos + headerHeight
        ) {
          setActiveLink(link.hash);
        }
      });
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div className="sidebar">
      <a href="#section-1" className={activeLink === '#section-1' ? 'active' : ''}>
        Section 1
      </a>
      <a href="#section-2" className={activeLink === '#section-2' ? 'active' : ''}>
        Section 2
      </a>
      <a href="#section-3" className={activeLink === '#section-3' ? 'active' : ''}>
        Section 3
      </a>
    </div>
  );
}

function App() {
  return (
    <div>
      <div className="header">Header</div>
      <div className="content">
        <div className="section" id="section-1">
          Section 1
        </div>
        <div className="section" id="section-2">
          Section 2
        </div>
        <div className="section" id="section-3">
          Section 3
        </div>
      </div>
      <Sidebar />
    </div>
  );
}

export default App;

在上面的代码中，我们首先定义了一个`Sidebar`组件，它包含三个导航链接，分别对应三个页面部分。然后，我们使用了`useState`钩子来追踪当前活动的导航链接。在组件渲染时，我们使用`useEffect`钩子来监听`scroll`事件，并根据当前滚动位置来更新活动导航链接的状态。

最后，我们在`App`组件中渲染了一个包含三个页面部分和`Sidebar`组件的父容器。我们还添加了一个顶部的`Header`组件，用于演示如何将侧边栏与其他组件一起使用。

请注意，上面的示例代码仅提供了一个基本的实现，你可能需要根据你的具体需求进行调整和修改。