title: Change background of a fixed div based on it's current background
body: <p>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 <code>background-color: gray</code> and when its on a gray background it would be <code>background-color: white</code></p>
  
  <p>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.</p>
  
  <hr>
  
  <p>I made a little <strong>example</strong> down here:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background1"&gt;&lt;div class="example-color1"&gt;For example this color on this block&lt;/div&gt;&lt;/div&gt;
  &lt;div class="background2"&gt;&lt;div class="example-color2"&gt;For example this color on this block&lt;/div&gt;&lt;/div&gt;
  &lt;div class="background3"&gt;&lt;div class="example-color3"&gt;For example this color on this block&lt;/div&gt;&lt;/div&gt;
  &lt;div class="background4"&gt;&lt;div class="example-color4"&gt;For example this color on this block&lt;/div&gt;&lt;/div&gt;
  &lt;div class="fixed-background"&gt;This should change color based on background&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>