jquery - 仅隐藏在固定透明导航栏后面滚动的元素部分

Question

我已经搜索了很多关于这个问题的答案，并发现了很多类似的问题，但还没有找到适合我的解决方案。我可能只是遗漏了一些非常明显的东西。

我有一个距离顶部 40 像素的固定透明导航栏。

问题是什么，我想达到什么目的:

我有视差滚动，导航栏在图像上有透明元素看起来很棒，但是当滚动经过文本时它看起来很糟糕。

我只想在包含文本 .About、.Portfolio 和 的三个部分中隐藏与导航栏冲突的文本.Contact，或仅导航栏后面的位。

我刚刚找到了解决问题的解决方案，但我认为它看起来仍然有点笨拙。 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");
      }
    });
  });
});

也许如果有一种方法可以包含淡出或逐行选择文本。当文本堆叠成更多行时，这在较低分辨率下看起来尤其糟糕，并且它会立即消失，留下更大的空白。

这是导航 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

在这里你可以看到重叠:overlapping text

Z-index 解决方案可以正常工作，但目前它不适用于我的网站，因为图像被设置为背景并且包含内容的部分滚动到顶部(视差滚动)，所以我无法对图像后面的文本进行 z-index。也许只在特定点激活的响应式 div 可以解决这个问题？

Answer 1

感谢@Gonzaldo。我在导航栏后面创建了一个“隐藏”的 div 元素，以使用适当的 z-index 数字来隐藏文本。我花了一点时间才弄清楚顺序和数字，但最终还是到了那里，看起来很棒。

solution diagram