控制导航栏

Question

我正在使用 Bootstrap 和 ReactJS，并尝试在向下滚动时更改导航栏上的活动选项卡。目前，当我单击某个部分时，我会更改活动选项卡。每个部分都是网站上的不同组件。

在上图中，我点击了“最近的项目”选项卡，使其处于活动状态，并向下滚动到最近的项目。即使我使用滚动条向下滚动，我也希望站点更改活动选项卡。

这是导航栏的代码。请帮忙！！！

import React from 'react';
import { Link } from 'react-router-dom';
// import Scrollspy from 'react-scrollspy';
import { animateScroll as scroll, scroller} from 'react-scroll';
import './Navigation.css';

export default function MainNavigation() {
  let didScroll = false;

  window.onscroll = () => didScroll = true;

  setInterval(() => {
      if ( didScroll ) {
          didScroll = false;
          console.log('Someone scrolled me!')
      }
  }, 250);

  const scrollFunc=(e)=>{
    if(e==='home'){
      scroll.scrollToTop()
      for(var j = 2; j<=4; j++)
      {
        var navbarSpy = "navMain-" + j;
        document.getElementById(navbarSpy).className = "nav-item";
      }
      document.getElementById("navMain-1").className = "navbar-brand";
    }
    else {
      scroller.scrollTo(e, {
        duration: 1400,
        delay: 0,
        offset: 25,
        smooth: 'easeInOutQuart'
      })
      for(j = 2; j<=4; j++) {
        navbarSpy = "navMain-" + j;
        document.getElementById(navbarSpy).className = "nav-item";
      }
      var tab = 2;
      if (e==='recentProjects')
        tab =3;
      if(e==='contact')
        tab=4;
      navbarSpy="navMain-" + tab;
      document.getElementById(navbarSpy).className = "nav-item active";
    }
  }
  return (
    <div>
      <nav className="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" id="mainNavbar">
        <a className="navbar-brand" id="navMain-1" style={{cursor:"pointer"}} data-toggle="collapse" data-target=".navbar-collapse.show" onClick={()=>scrollFunc("home")}>
          <img src={require('./logo_transparent.jpg')} width="30" height="30" className="d-inline-block align-top" alt=""/>
          Home
        </a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="main-navbar">
          <ul className="navbar-nav mr-auto">
          &nbsp;&nbsp;&nbsp;
            <li className="nav-item" id="navMain-2">
              <a className="nav-link" onClick={()=>scrollFunc("aboutme")} data-toggle="collapse" data-target=".navbar-collapse.show" style={{cursor:"pointer"}}>About Me</a>
            </li>
            <li className="nav-item" id="navMain-3">
              <a className="nav-link" onClick={()=>scrollFunc("recentProjects")} data-toggle="collapse" data-target=".navbar-collapse.show" style={{cursor:"pointer"}}>Recent Projects</a>
            </li>
            <li className="nav-item" id="navMain-4">
              <a className="nav-link" onClick={()=>scrollFunc("contact")} data-toggle="collapse" data-target=".navbar-collapse.show" style={{cursor:"pointer"}}>Contact Me</a>
            </li>
          </ul>
        </div>      
      </nav>
    </div>
  );
}

Answer 1

您不需要 setInterval 函数，每次有人滚动时都会触发 onScroll 事件侦听器。但是你需要在一个只会运行一次的钩子中添加那个事件监听器。

React.useEffect( () => { // this only runs on first render
  window.addEventListener('scroll', () => { // this adds an event listener (you only need one)
    console.log(window.scrollTop); // This gives you how many pixels the user has scrolled from the top
    // write your code here to highlight the correct nav item based on the window.scrollTop
  }
}, [] )