title: How to hide text when it passes through a fixed div?
body: <p>As you can see from the following code snippet, when you scroll the page the text passes under a fixed div. How can I make text behind this fixed div invisible? It still needs to be visible when not under the fixed div. </p>
  
  <p>The background colour of the page content changes so I can't just set the colour of the fixed div to the colour of the background.</p>
  
  <p>EDIT: Sorry I should have explained it a bit better. The overlay div won't be green, I want it to match the background colour of the content underneath so it gives the effect of the text disappearing as it passes through the overlay div. I can't just set it to the background colour of the content underneath because the background colour of the content underneath changes throughout the page.</p>
  
  <p><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>div.pagecontent1 {
    height:300px ;
    background-color: white;
    color: black;
  }
  
  div.pagecontent2 {
    height:300px ;
    background-color: black;
    color: white;
  
  }
  
  div.overlay {
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 500;
    height: 100px;
    background-color: green;
    opacity: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pagecontent1"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="pagecontent2"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="pagecontent1"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="pagecontent2"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="pagecontent1"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="pagecontent2"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="overlay"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>