Reputation: 117
While scrolling, I want to change the color Links depending on Id. how can i do that?
Example:
<div>
<nav>
<div className="bg-mainColor h-16 flex justify-between">
<div className="text-white">Navbar</div>
<div>
<Link to="/" className="text-white">
Home
</Link>
<Link to="#first" className="text-white">
Features
</Link>
<a href="#" className="text-white">
Courses
</a>
</div>
</div>
</nav>
<div className="min-h-screen" id="feature">
Features
</div>
<div className="min-h-screen" id="course">
Courses
</div>
</div>
Check this picture to understand me more
Upvotes: 0
Views: 838
Reputation: 955
you must add an Id to your link and add an event listener on your componentDidMount :
componentDidMount() {
document.addEventListener('scroll' , this.handleScroll)
}
and your handleScroll
is like :
handleScroll = (event) => {
//handle your event base on scroll in pixels or what ever for example :
if(window.scrollY > 100) {
let aEl = document.getElementById('YOUR_LINK_ID');
aEl.setAttribute("style" , "color : red")
}
}
and dont forget to removeEventListener
on ComponentWillUnMount
:
componentWillUnMount() {
document.removeEventListener('scroll',this.handleScroll);
}
Upvotes: 2