How to make a fixed header when scrolling in React?

Question

React

Hello, please tell me how to make an animated appearance of a fixed header in react when scrolling, I will be grateful for your help
. Will this approach be used correctly?

React.useEffect(() => {
    window.addEventListener('scroll', function () {
      if (window.pageYOffset > 0) {
        console.log('open')
      } else {
        console.log('hide')
      }
    })
  }, [])