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

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");
      }
    });
  });
});

也许如果有办法逐行包含淡出或 select 文本。当文本堆叠成更多行时，这在较低分辨率下看起来尤其糟糕，并且它会立即消失，留下更大的白色 space.

这是导航 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。我在导航栏后面创建了一个 'hidden' div 元素，以使用适当的 z-index 数字遮盖文本。我花了一点时间才弄清楚顺序和数字，但最终还是到了那里，看起来很棒。

solution diagram

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

Hiding only the part of an element that scrolls behind a fixed transparent nav bar

html

css

jquery

alpha-transparency

nav