I'm trying to create an overlay with a white sidebar and header that begin changing color to black when an expander starts filling the screen. The expander fills the screen from the center so parts of the header and sidebar should be black while the parts not covered by the expander should be white.

So far, I have tried positioning a duplicate header/sidebar with the desired properties inside of the expander div but the scaling and positioning ended up being a nightmare as I used JS to apply a transform property on the expander, resulting in the nested elements expanding as well.

The current best approach that I came up with is to somehow use overflow hidden and position the sidebar and header outside of the expander but I'm now running into the problem of the overflow not affecting the duplicate sidebar/header because they're not children of the expander.

Is there a way around this or is my architecture just no good?

Edit: added some code

Expander is inside a container called scroll2. Scroll2 is just the second scroll component of the website.

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

Expander CSS

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

Expander's transform style changes based on the user's scroll position.

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

My header and sidebar components are outside of the scroll entirely and are placed in my router logic area.

<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>