handle window scroll

Component.jsx

const Comp = (props) => {
  const myRef = useRef()
  const [activeState, setActiveState] = useState(false)

  const callbackTrue = () => {
    // define callback
    setActiveState(true)
  }
  const callbackFalse = () => {
    // define callback
    setActiveState(false)
  }  
  useScrollInRange(myRef.current, callbackTrue, callbackFalse)
  
  return (
    ...
  )
}

index.js

function scrollHandler(element, callback = () => console.log('mark'), callbackError = () => ()) {
  return ev => {
    const PAGE_SIZE = element.clientHeight
    const windowPosition = window.scrollY
    const elementPosition = element.offsetTop
    (
      elementPosition + PAGE_SIZE >= windowPosition &&
      elementPosition <= windowPosition
    ) 
      ? callback() // TODO: mark element
      : callbackError()
  }
}

const elementList = document.querySelector('navbar a')
Array.from(elementList)
  .map(el => (
    window.addEventListener('scroll', scrollHandler(el))
  ))

useScrollInRange.js

const useScrollInRange = (element, callbackTrue, callbackFalse) => {
  useEffect(() => {
    let eventListener
    if (element) {
      eventListener = window.addEventListener('scroll', scrollHandler(element, callbackTrue, callbackFalse))
    }
    
   return () => window.removeEventListener(eventListener)
  }, [element])
}