Header Scroll React

const headerElement = useRef(null);

useEffect(() => {
 window.onscroll = () => {
 const headerScrollPosition = headerElement.current.scrollTop + headerElement.current.clientHeight;
 
 if (window.scrollY >= headerScrollPosition) {
 setScrolled(true);
 } else {
 setScrolled(false);
 }
 }
 return () => {
 window.onscroll = () => {};
 }
 }, [
 open,
 scrolled
 ]);
 
 <Style.Header ref={ headerElement } className={ scrolled ? 'app-fixed-top' : '' }>
 
 position: fixed;
 top: 0;
 left: 0;
 right: 0;