En realidad, no entiendo por qué esta parte del código no funciona como debería. Este bloque useEffect se vuelve a renderizar en cada posición de scrollY. Además, veo que esta parte del código: console.log(wrapperRef.current.style.opacity); debería llamar a las sentencias if y else if, pero no lo hace.
Aquí está el código:
useEffect(() => { console.log(wrapperRef.current.style.opacity); if (wrapperRef.current.style.opacity === 0) { setIsHidden(true); console.log("true"); } else if (wrapperRef.current.style.opacity === 1) { setIsHidden(false); console.log("false"); } }, [position]); Como puede ver aquí, los valores de estilo son cadenas, pero con el operador === también verifica la igualdad de tipos.
Esto significa que verifica que '0' === 0 que no son los mismos tipos y también por qué su verificación nunca ingresa al cuerpo if.
Busque '0' o use el operador == que ignora los tipos.