In my current website setup, I have multiple full-width content containers stacked on the Y-axis. Every other container is blue and red alternatively. I am looking to incorporate an SVG image or a button fixed in the top-left corner that moves with the user as they scroll. The fill color of this element should dynamically invert based on the background color of the underlying content containers. When the fixed element hovers over two containers simultaneously, its fill color should be split accordingly.
As the user scrolls, the fixed element (resembling a circle) should adapt its fill color to match the background elements below it. If the circle is fully positioned over a red container, it should turn blue; if over a blue container, it should turn red. When spanning two containers, it should blend its fill color.
The initial idea of using position:fixed for each content container did not work as expected due to the attachment of elements' viewport to the window/body. Position:sticky was tried next, which stopped the element at the container's bottom line but lacked a sharp cut-off effect beyond it.
Exploring the use of z-index revealed limitations in achieving the desired effect because of its one-dimensional nature.
CSS code snippet to adjust the blue circle:
.fixed {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border-radius: 50px;
background-color: blue;
}
.bg {
height: 200px
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue
}<div>
<div class="fixed"></div>
<div class="backgrounds">
<div class="bg bg-red"></div>
<div class="bg bg-blue"></div>
<div class="bg bg-red"></div>
<div class="bg bg-blue"></div>
</div>
</div>I appreciate any guidance or solution suggestions to help achieve the desired outcome.