我试图创建一个覆盖，它有一个白色的边栏和标题，当扩展器开始填充屏幕时，这些边栏和标题的颜色开始变为黑色。扩展器从中心填充屏幕，因此标题和侧边栏的部分应该是黑色的，而扩展器未覆盖的部分应该是白色的。

到目前为止，我已经尝试用所需的属性在扩展器div中定位一个重复的标题/侧边栏，但缩放和定位最终是一场噩梦，因为我使用JS在扩展器上应用了转换属性，导致嵌套元素也在扩展。

我提出的当前最好的方法是以某种方式使用溢出隐藏，并将侧边栏和标头定位在扩展器之外，但现在我遇到的问题是溢出不会影响重复的侧边栏/标头，因为它们不是扩展器的子级。

有办法解决这个问题吗？还是我的架构不好？

编辑：添加了一些代码

Expander位于名为Scroll2的容器中。Scroll2只是网站的第二个滚动组件。

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

扩展CSS

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

扩展器的转换样式根据用户的滚动位置更改。

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

我的标头和侧边栏组件完全位于滚动之外，并放置在路由器逻辑区域中。

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

顺晟科技：