title: Hiding only the part of an element that scrolls behind a fixed transparent nav bar
body: <p>I have searched a lot for an answer to this and have found lots of similar issues but haven't managed to find a solution that works for me. I'm probably just missing something very obvious.</p>
  
  <p>I have a fixed transparent nav bar that is 40px from the top.</p>
  
  <p>What the problem is and what I want to achieve:</p>
  
  <p>I have parallax scrolling and the nav bar looks great with the transparent element over the images, however it looks awful when scrolling past text.</p>
  
  <p><strong>I would like to hide only the text which conflicts with the nav bar in the three sections that contain text <code>.About</code>, <code>.Portfolio</code> and <code>.Contact</code>, or only the bit that is behind the nav bar.</strong></p>
  
  <p>I have just found this solution which sort of solves the problem, but I think still looks a bit clunky. <a href="https://stackoverflow.com/questions/33870582/hide-the-content-under-transparent-fixed-navbar-while-scrolling-down">Hide the content under transparent fixed navbar while scrolling down</a></p>
  
  <pre><code>$(document).ready(function() {
    $(document).scroll(function() {
      $(".About p, .Portfolio p, .Contact p, .About h3, .Portfolio h3, .Contact h3 ").each(function() {
        if ($(this).offset().top &lt;= $(document).scrollTop() + 5) {
          $(this).css("opacity", "0");
        } else {
          $(this).css("opacity", "1");
        }
      });
    });
  });
  </code></pre>
  
  <p>Perhaps if there is a way to include a fadeOut or select the text line by line. This looks especially bad at lower resolutions when the text stacks up into more lines, and it all disappears at once leaving a larger white space.</p>
  
  <p>Here is the nav Html:</p>
  
  <pre><code>    &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a id="title" title="Charlie Day" href="#top" aria-haspopup="true"&gt;CHARLES DAY&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a class="anchor" title="About" href="#About" aria-haspopup="true"&gt;About &lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a class="anchor" title="Portfolio" href="#Portfolio" aria-haspopup="true"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a class="anchor" title="Contact" href="#Contact" aria-haspopup="true"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>And here is the relevant bits of CSS:</p>
  
  <pre><code>nav {
  background-color: rgba(255,255,255,0.5);
  position: fixed;
  top: 0px; left: 0px;
  width: 100%;
  height: 40px; 
  z-index: 300;
  font-size: 1.1em;
  font-weight: 400;
  }
  
  nav::after { content: ''; display: block; clear: both; }
  
  nav ul { list-style: none; margin: 0; padding: 0; }
  
  nav ul li:hover {background-color: rgba(200,200,200,.5); }
  nav ul li:hover &gt; ul { display: block; }
  nav ul li a {
  display: inline-block;
  color: black;
  padding: 10px 20px;
  text-decoration: none;
  width: 125px;
  position: relative;
  }
  a#title {font-weight: 700; }
  
  
  /*top-level*/
  nav &gt; ul  { padding-left: 0px; margin-left: -10px; }    
  nav &gt; ul &gt; li { float: left; }
  nav &gt; ul &gt; li &gt; a { width: auto; padding: 10px 20px 14px 20px; }
  </code></pre>
  
  <p>I have just tried this:</p>
  
  <pre><code>$(document).ready(function() {
    $(document).scroll(function() {
      $(".About p, .Portfolio p, .Contact p, .About h3, .Portfolio h3, .Contact h3 ").each(function() {
        if ($(this).offset().top &lt;= $(document).scrollTop() + 6) {
          $(this).fadeOut() }, 500);
        } else {
          $(this).fadeIn() }, 500);
        }
      });
    });
  });
  </code></pre>
  
  <p>but it doesn't seem to work at all.</p>
  
  <p><strong>What would be really nice is if only the text content became invisible or hidden etc at exactly 40px from the top, so that only the part of the text that is above the 40px is hidden but anything left below 40px is still visible.</strong></p>
  
  <p>video of how it looks at present with JS solution: <a href="https://vimeo.com/148953772" rel="nofollow noreferrer">https://vimeo.com/148953772</a></p>
  
  <p>Here you can see the overlap:<a href="https://i.stack.imgur.com/paShk.png" rel="nofollow noreferrer">overlapping text</a></p>
  
  <p>The Z-index solution would work normally, but at the moment it wont for my site as the images are set as background and the sections containing the content scroll over the top (parallax scrolling) of this so I would not be able to z-index the text behind the image. Maybe a responsive div that only activates at a certain point could get around this?</p>