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

【问题标题】：Hiding only the part of an element that scrolls behind a fixed transparent nav bar仅隐藏在固定透明导航栏后面滚动的元素部分
【发布时间】：2015-12-14 22:26:36
【问题描述】：

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

我有一个固定的透明导航栏，距离顶部 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 索引。也许只在特定点激活的响应式 div 可以解决这个问题？

【问题讨论】：

你能举个例子、视频、代码或任何东西来帮助我们可视化并了解你正在使用什么吗？
你可以试试z-index。用一个固定的background 固定一个div，它的z-index 比你的文本大，但比你的图像小。
我不确定这是否可行。我目前将图像设置为背景图像，其中包含在其上方滚动的部分中的文本。例如，我的文本在<section class="About"><p> 或<section class="About"> <h3> 内，我的图像在css 中设置为背景图像。所以要设置所有适当的 z 索引，视差滚动将不再起作用，除非有办法解决这个问题？
@S.Kiers 您想了解更多信息吗？
对不起，去睡觉了。您的网站上线了吗？我们可以看看实际工作/失败的项目吗？

标签： jquery html css nav alpha-transparency

【解决方案1】：

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

solution diagram

【讨论】：