0

I am using Bootstrap and ReactJS, and trying to have the active tab on the nav-bar change when I scroll down. Currently, I have the active tab change when I click on a section. Each of the sections are different components on the website. enter image description here

In the picture above, I clicked on "Recent Projects" tab, so it made it active, and scrolled down to recent projects. I want the site to change the active tab even if I scroll down using the scroll bar.

Here is the code for the navbar. Please help!!!

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>
  );
}
Danny Janani
  • 13
  • 5

1 Answers1

0

You don't need the setInterval function, an onScroll event listener will fire every time someone scrolls. But you need to add that event listener inside a hook that will only run once.

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
  }
}, [] )
georgedum
  • 491
  • 3
  • 10