2

I got a fixed div that follows you when you scroll on the side of my screen, I would like to change it's background based on it's current background. So for example when the div is on a white background it's set to background-color: gray and when its on a gray background it would be background-color: white

Also I want it to change the color when you sroll over another background color, not with a button that you need to click when trying to change the color.

I made a little example down here: 

.background1{
  background-color: #777777;
  height: 300px;
  width: 100%;
  padding: 50px 200px;
  box-sizing: border-box;
}

.background2{
  background-color: #444444;
  height: 300px;
  width: 100%;
  padding: 50px 200px;
  box-sizing: border-box;
}

.background3{
  background-color: #dddddd;
  height: 300px;
  width: 100%;
  padding: 50px 200px;
  box-sizing: border-box;
}

.background4{
  background-color: #bbbbbb;
  height: 300px;
  width: 100%;
  padding: 50px 200px;
  box-sizing: border-box;
  margin-bottom: 500px;
}

.example-color1{
  color: white;
  font-weight: bold;
  background-color:  #444444;
  width: 100px;
  height: 100px;
  padding: 10px;
}

.example-color2{
  color: white;
  font-weight: bold;
  background-color:  #cccccc;
  width: 100px;
  height: 100px;
  padding: 10px;
}

.example-color3{
  color: white;
  font-weight: bold;
  background-color:  #666666;
  width: 100px;
  height: 100px;
  padding: 10px;
}

.example-color4{
  color: white;
  font-weight: bold;
  background-color:  #999999;
  width: 100px;
  height: 100px;
  padding: 10px;
}

.fixed-background{
  position: fixed;
  top: 55px;
  left: 30px;
  background-color: white;
  height: 100px;
  width: 100px;
  border: 1px black solid;
  padding: 10px;
}
<div class="background1"><div class="example-color1">For example this color on this block</div></div>
<div class="background2"><div class="example-color2">For example this color on this block</div></div>
<div class="background3"><div class="example-color3">For example this color on this block</div></div>
<div class="background4"><div class="example-color4">For example this color on this block</div></div>
<div class="fixed-background">This should change color based on background</div>
Minegolfer
  • 276
  • 4
  • 18
  • Possible duplicate of [Changing background color of a div based on background color of some other div](http://stackoverflow.com/questions/20322129/changing-background-color-of-a-div-based-on-background-color-of-some-other-div) – Arjan Knol May 11 '17 at 13:56
  • @ArjanKnol I hope to find a way were I don't have to use JQuerry – Minegolfer May 11 '17 at 13:59
  • You could work with transparency but you will not get these expected results. `background: rgba(0,0,0,0.5);`. I don't think that there is a other way to do this only with CSS. – Huelfe May 11 '17 at 14:00
  • Using Jquerry would be fine to, but I don't know a lot of JQuerry, like the answer in the link ArjanKnol gave me, i wouldn't know how to use that in my own code (or in the example code) – Minegolfer May 11 '17 at 14:02
  • @Minegolfer This just isn't possible, css is a made only for styling. – Arjan Knol May 11 '17 at 14:03
  • http://stackoverflow.com/questions/20322129/changing-background-color-of-a-div-based-on-background-color-of-some-other-div How could I use that in my example, here they make use of a button which you can click on, in my code is has to notice itself on what background it is after scrolling. – Minegolfer May 11 '17 at 14:05
  • Maybe you like this CSS way as I said. [fiddle](https://jsfiddle.net/a9nrzq98/) – Huelfe May 11 '17 at 14:08
  • @Huelfe it indeed would be a nice solution if there was no other way, but I hoped for a way I could control the color myself. Cause when its on a white background it's not good to make it even whiter or when its on a black background it's not good to make it blacker. – Minegolfer May 11 '17 at 14:10

1 Answers1

0

Adding some sort of filter (see all filters here) and a background with opacity did the job.

.fixed background{
    background-color: RGBA(0,0,0,0.5);
    filter: hue-rotate(90deg);
}

Worked out pretty nice :D

Minegolfer
  • 276
  • 4
  • 18
  • it still looks like you would need some js to change the color based on what background the fixed div is currently over – Digamber Oct 15 '18 at 04:46