Make anything in Container not Transparent
<p>Fiddle:<a href="https://jsfiddle.net/jzhang172/b09pbs4v/" rel="nofollow">https://jsfiddle.net/jzhang172/b09pbs4v/</a></p>

<p>What I'm trying to accomplish is <strong>as the user scrolls, I would like anything in the bordered container to show be not transparent (opacity:1)</strong>.  <br>
It would also be awesome to also have as it goes in the box to be not transparent to have a sort of transition to opacity:1.  </p>

<p>I don't think this is achieve in CSS, and I'm still learning jquery|javascript.
Thank you!</p>

<p>As a bonus question: How would this affect the website in mobile because I certainly don't want this effect on mobile.  I'd like this specifically for anything else and for mobile, just opacity:1.
<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
  height:500px;
  width:100%;
  background:gray;
  font-size:20px;
  overflow:auto;
 
}
.box p{
  opacity:.5;
}
.boxtwo{
  height:100px;
  width:100%;
  background:red;
  opacity:.5;
}
.make-me-solid{
  position:absolute;
  top:0;
  height:400px;
  width:100%;
  border:1px solid black;
}

body,html{
  margin:0;
  padding:0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
 &lt;div class="make-me-solid"&gt;&lt;/div&gt;
  &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  &lt;/p&gt;
  &lt;div class="boxtwo"&gt;&lt;/div&gt;
    &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  &lt;/p&gt;
    &lt;div class="boxtwo"&gt;&lt;/div&gt;
    &lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
  &lt;/p&gt;
  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>