Simula el cambio de color cuando div se superpone a otro div.

Tengo un div fijo, que se desplaza sobre ciertos elementos.

Cuando el div está sobre un cierto div, no sería para tener un cierto color y una cierta imagen. Cuando se acabe otra div, quiero que cambie de color.

introduzca la descripción de la imagen aquí

Demostración básica en vivo

Estoy bastante seguro de que para esto necesitaré dos divs, uno está oculto.

Jugué con z-index , pero esto no parece ser solucionable con cosas tan básicas.

Ejemplo más complejo.

Juego con la propiedad esto:

 .two { background-color: green; z-index: 250; } 

Pero las órdenes parecen contradictorias,

Si ambos tamaños son fijos, podría usar js para hacer un poco de magia a la altura de los píxeles del elemento relacionado con la imagen desplazada.

¿Hay alguna manera alrededor de esto?

Ya casi estás pensando en usar dos divs. El truco es que necesita hacerlos en diferentes contenedores y confiar en el overflow:hidden y de uso position:absolute en este caso, pero necesita algo de JS para controlar la posición para que se comporte como fijo:

 window.onscroll = function() { var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop; document.documentElement.style.setProperty('--scroll-var', scroll+"px"); } 
 :root { --scroll-var:0; } .container { height: 150px; outline: 1px solid red; position: relative; overflow:hidden; } .fixed { position: absolute; top:var(--scroll-var,20px); } .only-one{ background-color: lightblue; } .only-two{ background-color: lightgreen; margin-top:-150px; /*The height of the previous section*/ } .overlay { position:absolute; width: 100%; height: 100% } .one { background-color: yellow; } .two { background-color: green; } 
 
  • a
  • b
  • c
  • a
  • b
  • c

Si necesita el color para reactjsr al color de fondo, puede usar el modo mix-blend-mode :

La propiedad CSS de modo mezcla-mezcla describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento primario directo del elemento y el fondo del elemento.

Nota: no es compatible con IE / Edge

 .container { height: 150px; outline: 1px solid red; } .fixed { position: fixed; background-color: lightblue; mix-blend-mode: luminosity; } .one { background-color: yellow; } .two { background-color: green; } 
 
  • a
  • b
  • c

Mira esto :

https://jsbin.com/wozedar/edit?html,css,js,output

o más al punto, usa esta función como una base para lo que deseas:

 function isOnTopOf(a, b) { var fixedCoord = a.getBoundingClientRect(); var bgCoord = b.getBoundingClientRect(); if (fixedCoord.top + fixedCoord.height >= bgCoord.top) { return true; } return false; } 

Para comparar elementos, en su caso, probablemente haría algo como esto en cada desplazamiento:

 var fixed = document.querySelector(".fixed-div"); var div1 = document.querySelector(".div--1"); if (isOnTopOf(fixed, div2)) { fixed.classList.add("fixed-div--light"); } 

La función element.getBoundingClientRect () le proporciona la información relevante a partir de la cual puede determinar si los objetos están arriba, debajo o uno encima del otro.

Simplemente agregue un detector de eventos al objeto de la ventana y compare las posiciones en cada desplazamiento y estará listo. Tal vez podría considerar la limitación de la función de desplazamiento si desea hacer cosas más complejas, pero este jsbin debería ayudarle.