I am currently using Bootstrap and ReactJS, and I am facing an issue where the active tab on the navigation bar does not change when I scroll down the page. At the moment, the active tab only changes when I click on a specific section. Each section corresponds to a different component on the website. https://i.sstatic.net/WEcmm.png
As shown in the image above, I clicked on the "Recent Projects" tab, which made it active and scrolled down to the recent projects section. However, I want the active tab to change even when I scroll down using the scroll bar.
Here is the code for the navigation bar. Any assistance would be greatly appreciated!
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">
<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>
);
}