Simulate Change Of Color When Div Overlays Another Div

I have a fixed div, which scroll over certain elements. When the div is over a certain div, I wan't it to have a certain color and a certain image. When it's over another div, I wa

Solution 1:

You are almost close thinking about using two divs. The trick is that you need to make them in different containers and rely on overflow:hidden and use position:absolute intead of fixed in this case but you need some JS to control the position so it behaves like fixed:

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

<divclass="container"><divclass="overlay one"></div><divclass="fixed only-one"><ul><li>a</li><li>b</li><li>c</li></ul></div></div><divclass="container"><divclass="overlay two"></div><divclass="fixed only-two"><ul><li>a</li><li>b</li><li>c</li></ul></div></div><divclass="container"><divclass="overlay three"></div></div><divclass="container"><divclass="overlay four"></div></div>

Here is a related question where I have done a similar effect : How to create image scrolling blend effect with CSS?

Solution 2:

If you need the color to react to the background color you can use mix-blend-mode:

The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

Note: not supported by 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;
}

<divclass="container one"><divclass="fixed"><ul><li>a</li><li>b</li><li>c</li></ul></div></div><divclass="container two"></div><divclass="container three"></div><divclass="container four"></div>

Solution 3:

Check this out :

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

or more to the point use this function as a base for what you want:

functionisOnTopOf(a, b) {
  var fixedCoord = a.getBoundingClientRect(); 
  var bgCoord = b.getBoundingClientRect();

  if (fixedCoord.top + fixedCoord.height >= bgCoord.top) {
      returntrue;
  }

  returnfalse;
}

To compare elements, in your case you would probably do something like this on each scroll:

varfixed = document.querySelector(".fixed-div");
var div1 = document.querySelector(".div--1");

if (isOnTopOf(fixed, div2)) {
   fixed.classList.add("fixed-div--light");
}

The function element.getBoundingClientRect() gets you the relevant info from which you can determine whether objects are above, below or on top of each other.

Just add an event listener to the window object and compare the positions on each scroll and you're good to go. You could maybe look into throttling the scroll function if you want to do more complex stuff, but this jsbin should get you going.