Estoy tratando de crear una superposición con una barra lateral y un encabezado blancos que comienzan a cambiar de color a negro cuando un expansor comienza a llenar la pantalla. El expansor llena la pantalla desde el centro, por lo que las partes del encabezado y la barra lateral deben ser negras, mientras que las partes no cubiertas por el expansor deben ser blancas.

Hasta ahora, he intentado colocar un encabezado/barra lateral duplicado con las propiedades deseadas dentro del div del expansor, pero la escala y el posicionamiento terminaron siendo una pesadilla, ya que usé JS para aplicar una propiedad de transformación en el expansor, lo que resultó en la expansión de los elementos anidados. también.

El mejor enfoque actual que se me ocurrió es usar de alguna manera el desbordamiento oculto y colocar la barra lateral y el encabezado fuera del expansor, pero ahora me encuentro con el problema del desbordamiento que no afecta la barra lateral/encabezado duplicado porque no son niños. del expansor.

¿Hay alguna forma de evitar esto o mi arquitectura simplemente no es buena?

Editar: agregó algo de código

Expander está dentro de un contenedor llamado scroll2. Scroll2 es solo el segundo componente de desplazamiento del sitio web.

 <div id="scroll2"> <div id="scroll2Box" /> <div id="expander" /> <div id="scroll2BoxImages" /> </div>

Expansor CSS

 #expander { position: fixed; top: 0; height: 100vh; width: 100vw; background: black; right: 0; z-index: 1; transform: scale(0); overflow: hidden; }

El estilo de transformación de Expander cambia según la posición de desplazamiento del usuario.

 document.getElementById('expander').style.transform = 'scale(' + String(heightRatio) + ')'

Los componentes de mi encabezado y barra lateral están completamente fuera del desplazamiento y se colocan en el área lógica de mi enrutador.

 <Router> <Sidebar yPosition={y} direction={direction}/> <Header yPosition={y}/> <div id="mainContent"> <Switch> <Route exact path="/" component={HomePage} /> <Route path="/about" component={AboutPage} /> <Route path="/contact" component={ContactPage} /> <Route path="/products" component={ProductsPage} /> </Switch> </div> {/* <Footer /> not complete yet */} </Router>