Estou tentando mudar a transparência do meu header
baseado no scroll da tela. Para tanto, criei um eventListener
de scroll
que dispara a seguinte função:
function solidHeader(){
if (document.getElementById('crossfade').getBoundingClientRect().bottom < 60) {
setTypeBackground('solid')
} else {
setTypeBackground('transparent')
}
}
O objetivo é que, quando o bottom
da <div id="crossfade" />
tocar no bottom
do header
, o que acontece quando a <div id="crossfade" />
está a 60px do topo da página, a função mude o estado de typeBackground
para 'solid'
. Com isso, é esperado que o useEffect
:
window.addEventListener('scroll', solidHeader)
useEffect(() => {
/* A tag de id="Card" é o header */
document.getElementById('Card').style.backgroundColor = typeBackground
}, [typeBackground])
dispare, alterando a propriedade backgroundColor
do header
para 'solid'
. Mas isso não acontece. Por quê?
Talvez seja importante mencionar que essa função está sendo implementada num componente irmão do header
:
function App() {
return (
<div id="super-container">
<AuthProvider>
/* Esse é o header que quero alterar: */
<Header />
<Switch>
/* esse é o componente que monitora o scroll e tenta alterar a propriedade: */
<Route exact path="/" component={Home} />
<Route path="/servicos" component={Servicos} />
<Route path="/teste" component={AreaCliente} />
</Switch>
</AuthProvider>
</div>
);
};
export default App;