This week I was working on my personal website (https://www.thomasledoux.be), and I needed my navigation items to be highlighted when scrolling to the linked section.
I found some solutions with a scroll listener, but none using the widely supported Intersection Observer (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
So I decided to write the logic myself.
What has to be done first, is referencing the <section>'s using React.useRef.
import * as React from 'react'
const personalRef = React.useRef(null)
const portfolioRef = React.useRef(null)
const contactRef = React.useRef(null)
Now we have the reference to the <section>'s we can fire up the IntersectionObserver. I prefer to do this using the React.useEffect hook. The ref objects are added as dependencies, so we can reference these when they are ready. I use the 0.5 threshold, this will cause the observer to be triggered when the <section> is >50% visible. The navElement gets the navigation element which has a href pointing to the <section>'s id.
React.useEffect(() => {
let observer
if (personalRef.current && portfolioRef.current && contactRef.current) {
const options = {
threshold: 0.5,
}
observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
const navElement = document.querySelector(
`a[href="/#${entry.target.id}"]`,
)
if (entry.isIntersecting) {
if (!navElement.classList.contains('active')) {
navElement.classList.add('active')
}
} else if (navElement.classList.contains('active')) {
navElement.classList.remove('active')
}
})
}, options)
observer.observe(personalRef.current)
observer.observe(portfolioRef.current)
observer.observe(contactRef.current)
}
return () => observer.disconnect()
}, [personalRef, portfolioRef, contactRef])
And that's it! The active class will be added to the navigation element which points to the <section>.
By adding the return function at the end of the useEffect hook, we make sure the IntersectionObserver is cleaned up correctly.
Full code can be found on https://github.com/thomasledoux1/website-thomas
Top comments (0)