Currently, I have developed a NavBar component.
I've implemented some JavaScript code that changes the navbar's background color once it reaches 50px. However, I am facing an issue in applying this scroll effect to only one specific file and not all files.
Specifically, I would like this scrolling effect to be active only on the homepage and not on any other pages such as aboutPage or others.
const [sticky, setSticky] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
window.scrollY > 50 ? setSticky(true) : setSticky(false);
});
}, []);
return (
<nav className={`container ${sticky ? "dark-nav" : ""}`}>
<Link to="/">
<img src={Logo} className="Logo" alt="" />
</Link>
<ul className={mobileMenu ? "" : "hide-mobile-menu"}>
<li>
<NavLink to="/">Home</NavLink>
</li>
<li>
<NavLink to="/About">About</NavLink>
</li>
<li>
<NavLink to="/Services">Services</NavLink>
</li>
<li>
<NavLink to="/Contact">
<btn className="btn">Contact Us</btn>
</NavLink>
</li>
</ul>
<img src={menuIcon} alt="" className="menu-icon" onClick={toggleMenu} />
</nav>
);