title: Hide content underneath a transparent div while scrolling
body: <p><strong>Edit with possible solution below the code</strong></p>
  <p>The site has a full page video.</p>
  <p>Scroll action: not to display content which is located 250px or less from the top — so 250px of top of the video is always visible.</p>
  <p>Perhaps a better way to understand this: hide content underneath a transparent <code>div</code>. But I think the first explanation is more code relevant.</p>
  <p>Second explanation leads to numerous questions and semi-answers. None of them however solves my problem.</p>
  <p>Here's an unanswered question that covers a lot: <a href="https://stackoverflow.com/questions/13128079/how-to-hide-contentthat-is-scrolled-under-a-transparent-div">How to hide content&#160;that is scrolled under a transparent div?</a></p>
  <p>I'd prefer the scroll bar to be full height.</p>
  <p>Maybe this could be a hint: <a href="https://stackoverflow.com/questions/20314061/add-a-class-to-a-div-when-top-of-the-window-reach-a-specific-element-and-remove">Add a class to a DIV when top of the window reach a specific element and remove it when not</a><br />
  This code could detect content position. Now to hide this upper overflow.</p>
  <p><strong>Demo</strong><br />
  <a href="http://jsfiddle.net/4TgmF/" rel="nofollow noreferrer">http://jsfiddle.net/4TgmF/</a></p>
  <p><strong>HTML</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;header&quot;&gt;
      &lt;video autoplay loop poster=&quot;https://dl.dropboxusercontent.com/u/9200106/rsz_dreamstimefree_252880.jpg&quot; id=&quot;bgvid&quot;&gt;
          &lt;source src=&quot;video.mp4&quot; type=&quot;video/mp4&quot;&gt;
          &lt;source src=&quot;video.ogv&quot; type=&quot;video/ogg&quot;&gt;
      &lt;/video&gt;
      &lt;div id=&quot;visible_part&quot;&gt;Part of the background that shoud be visible at all times. This DIV and its styling is for demonstration only&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;content&quot;&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>* { margin:0; }
  html, body {
    width:100%;
    height:100%;
  }
  #header {
      width:100%;
      height:100%;
  }
  #bgvid {
      position:fixed;
      z-index:-1000;
      width:auto;
      height:auto;
      min-width:100%;
      min-height:100%;
  }
  #visible_part {
      position:fixed;
      height:250px;
      border-bottom:1px solid rgba(255,255,255,0.1);
      color:#fff;
      background:rgba(0,0,0,0.1);
  }
  #content {
      width:100%;
      min-height:100%;
      background:#fafafa;
  }
  </code></pre>
  <p><strong>Edit</strong><br />
  Gajus Kuizinas suggested in comments to replicate the background and use it as a mask, which doesn't really solves the problem, but he got me thinking (thanks). The key word here is <strong>mask</strong>. I found a good article on this: <a href="http://thenittygritty.co/css-masking" rel="nofollow noreferrer">http://thenittygritty.co/css-masking</a>
  I think this could be a great solution. The mask would have <code>position:fixed;</code>, <code>top:250px;</code>, <code>height:100%;</code>(-250px). The only problem is I can't figure out how to do a mask with fixed position and scrollable content. Can you see what I mean?</p>