How to account for fixed elements in the DOM when checking if is in view.

[OTaylorUK]

Summary
So, I have a fixed nav on the page (80px in height), but I also need to check whether a subsequent dom element is currently in view.

The problem
The useInView() function works great, however, it's triggering too early (80px too early) as technically the element is in on the page but because of the fixed element it's actually not yet in view.

The question/solution?
Is there a way to account for fixed elements when using the useInView() function?

My code (React, NextJs)
`const { additionalClass = '', children } = props

const boxVariant = {
	visible: { opacity: 1, x: 0, transition: { delay:.7, duration: .7 }  },
	hidden:{ opacity: 0, x: "100%" },
}
const control = useAnimation()

const { ref: wrapRef, inView } = useInView({
	 trackVisibility: true, 
	 delay: 100 
});

useEffect(() => {
	if (inView) {
	  control.start("visible");
	} 
	else {
		control.start("hidden");
	}
  }, [control, inView]);

return (

	<motion.div  
		// transition={{ delay: 2 }}
		variants={boxVariant}
		initial="hidden"
		animate={control}
		ref={wrapRef} 
		className="layout-container container px-4 md:px-12 flex flex-col justify-center items-center "
	>
		{children}
	</motion.div>
);`

[thebuilder]

I would just use rootMargin for this. Set it to rootMargin: "80px 0 0", and it will give that extra space.