I am trying to implement an intersectionObserver to watch if a isIntersecting, but specifically only with another
My Attempt :-
export const Main = () => {
const sectionRef = useRef(null);
const { headerRef } = useContext(HeaderContext);
const [isIntersecting, setIntersecting] = useState<Boolean>(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
// Update state based on intersection status
setIntersecting(entry.isIntersecting);
console.log(entry)
},
{
root: document.querySelector('.app-header'),
rootMargin: '0px',
threshold: 0.1, // Intersection ratio
}
);
// Start observing the Section element
if (sectionRef.current) {
observer.observe(sectionRef.current);
}
// Cleanup function
return () => {
observer.disconnect();
};
}, []);
My desired result is to receive a true value if at point the user is scrolling and the header component intersects with the target Section Component. I have set the root in the options object to a be the reference of the actual header. When I try to scroll down, the Observer is observing based on the scroll viewport and not with the header. I’m definitely missing some key logic somewhere. Any help would be great.