1

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;

1 Resposta 1

0

Olá, confesso que não entendi ao certo o seu problema, mas levando em consideração esse trecho abaixo, talvez eu possa ajudar...

Estou tentando mudar a transparência do meu header baseado no scroll da tela.

Criei um exemplo simples que atende esse enunciado, talvez não seja exatamente o que você precisa, mas você pode facilmente o modificar para atender a sua necessidade.

https://codesandbox.io/s/scroll-8sxdp

2
  • Bruno, agradecido pela boa vontade de tentar ajudar. Mas se você não entendeu a pergunta, é sinal de que não deveria estar respondendo. Sua resposta parece caber muito mais num comentário. Note que, apesar de o seu código resolver o problema, ele não responde a pergunta. Tendo dito isso, seu código foi útil pra eu tentar adotar outra abordagem de monitoramento de scroll. A que eu estava usando era mto pesada
    – yoyo
    Commented 24/02/2021 às 18:46
  • Olá, obrigado pelo feedback, postei uma resposta pois sou novo no stackOverflow, e por isso, ainda não posso comentar em perguntas. Commented 24/02/2021 às 19:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .