reactjs - React, how to show sticky nav when scrolling

Question

I have a demo here

It's a simple react page with a header, nav and text content.

I'm trying to show the nav and then have it fixed at the top od the page when the page scrolls past the red header.

So I don't want it to showe when the page loads put then display it when the page scrolls past the res header.

I'm trying to use useEffect but I need to get a boolean some how to wrap the <Nav />

const [scrollPosition, setScrollPosition] = useState(0)
const [sticky, setSticky] = useState(false)

const handleScroll = () => {
  const position = window.pageYOffset
  setScrollPosition(position)
}

useEffect(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })

  scrollPosition > 20 ? 'navShow' : 'navHide'

  return () => {
      window.removeEventListener('scroll', handleScroll)
  }
}, [])

Answer 1

等待大神答复