仅隐藏在固定透明导航栏后面滚动的元素部分(Hiding only the part of an element that scrolls behind a fixed transparent nav bar)

 我已经搜索了很多答案，发现了很多类似的问题，但没有找到适合我的解决方案。 我可能只是错过了一些非常明显的东西。 
 
 我有一个固定的透明导航栏，距离顶部40px。 
 
 问题是什么以及我想要实现的目标： 
 
 我有视差滚动和导航栏看起来很好，透明元素在图像上，但滚动文本时看起来很糟糕。 
 
 我想隐藏在包含文本.About ， .Portfolio和.Portfolio的三个部分中与导航栏冲突的文本，或仅隐藏导航栏后面的位。 
 
 我刚刚发现这种解决方案可以解决问题，但我认为看起来仍然有点笨拙。 向下滚动时隐藏透明固定导航栏下的内容 
 
$(document).ready(function() {
  $(document).scroll(function() {
    $(".About p, .Portfolio p, .Contact p, .About h3, .Portfolio h3, .Contact h3 ").each(function() {
      if ($(this).offset().top <= $(document).scrollTop() + 5) {
        $(this).css("opacity", "0");
      } else {
        $(this).css("opacity", "1");
      }
    });
  });
});
 
 也许如果有一种方法可以包含fadeOut或逐行选择文本。 当文本堆叠成更多行时，这在较低分辨率下看起来特别糟糕，并且它们一下子消失，留下更大的空白区域。 
 
 这是nav Html： 
 
    <nav>
        <ul>
            <li><a id="title" title="Charlie Day" href="#top" aria-haspopup="true">CHARLES DAY</a></li>

            <li><a class="anchor" title="About" href="#About" aria-haspopup="true">About </a></li>

            <li><a class="anchor" title="Portfolio" href="#Portfolio" aria-haspopup="true">Portfolio</a></li>

            <li><a class="anchor" title="Contact" href="#Contact" aria-haspopup="true">Contact</a></li>
        </ul>
    </nav>
 
 以下是CSS的相关内容： 
 
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 > 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 > ul  { padding-left: 0px; margin-left: -10px; }    
nav > ul > li { float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 14px 20px; }
 
 我刚试过这个： 
 
$(document).ready(function() {
  $(document).scroll(function() {
    $(".About p, .Portfolio p, .Contact p, .About h3, .Portfolio h3, .Contact h3 ").each(function() {
      if ($(this).offset().top <= $(document).scrollTop() + 6) {
        $(this).fadeOut() }, 500);
      } else {
        $(this).fadeIn() }, 500);
      }
    });
  });
});
 
 但它似乎根本不起作用。 
 
 真正好的是，如果只有文本内容在距离顶部正好40px处变得不可见或隐藏等，那么只有40px以上的文本部分被隐藏，但是仍然可以看到低于40px的任何内容。 
 
 目前JS解决方案的视频： https ： //vimeo.com/148953772 
 
 在这里您可以看到重叠： 重叠文本 
 
 Z-index解决方案可以正常工作，但目前它不适合我的网站，因为图像被设置为背景，包含内容的部分滚动到顶部（视差滚动），所以我将无法z-索引图像背后的文字。 也许一个响应的div只能在某个时刻激活才能解决这个问题？ 

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.
 
I have a fixed transparent nav bar that is 40px from the top.
 
What the problem is and what I want to achieve:
 
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.
 
I would like to hide only the text which conflicts with the nav bar in the three sections that contain text .About, .Portfolio and .Contact, or only the bit that is behind the nav bar.
 
I have just found this solution which sort of solves the problem, but I think still looks a bit clunky. Hide the content under transparent fixed navbar while scrolling down
 
$(document).ready(function() {
  $(document).scroll(function() {
    $(".About p, .Portfolio p, .Contact p, .About h3, .Portfolio h3, .Contact h3 ").each(function() {
      if ($(this).offset().top <= $(document).scrollTop() + 5) {
        $(this).css("opacity", "0");
      } else {
        $(this).css("opacity", "1");
      }
    });
  });
});
 
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.
 
Here is the nav Html:
 
    <nav>
        <ul>
            <li><a id="title" title="Charlie Day" href="#top" aria-haspopup="true">CHARLES DAY</a></li>

            <li><a class="anchor" title="About" href="#About" aria-haspopup="true">About </a></li>

            <li><a class="anchor" title="Portfolio" href="#Portfolio" aria-haspopup="true">Portfolio</a></li>

            <li><a class="anchor" title="Contact" href="#Contact" aria-haspopup="true">Contact</a></li>
        </ul>
    </nav>
 
And here is the relevant bits of CSS:
 
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 > 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 > ul  { padding-left: 0px; margin-left: -10px; }    
nav > ul > li { float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 14px 20px; }
 
I have just tried this:
 
$(document).ready(function() {
  $(document).scroll(function() {
    $(".About p, .Portfolio p, .Contact p, .About h3, .Portfolio h3, .Contact h3 ").each(function() {
      if ($(this).offset().top <= $(document).scrollTop() + 6) {
        $(this).fadeOut() }, 500);
      } else {
        $(this).fadeIn() }, 500);
      }
    });
  });
});
 
but it doesn't seem to work at all.
 
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.
 
video of how it looks at present with JS solution: https://vimeo.com/148953772
 
Here you can see the overlap:overlapping text
 
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?

原文：https://stackoverflow.com/questions/34277781