JAVASCRIPT

sticky navbar in react

const [stickyNav, setStickyNav] = useState<boolean>(false);

  useEffect(() => {
    window.onscroll = () => {
      setStickyNav(window.pageYOffset === 0 ? false : true);
      return () => (window.onscroll = null);
    };
  }, []);
  return (
    <div className={`  w-full top-0  z-[1000] py-4 text-[#FFF] ${stickyNav ? 'bg-primary fixed' : ''} }`}>
      <FlexXBetweenYCenter className="flex items-center justify-between h-full section-wrapper">
		<FlexXBetweenYCenter/>
	</div>
  )