Question

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

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

问题是什么以及我想要实现的目标：

我有视差滚动，导航条看起来很棒，图像上有透明元素，但滚动文本时看起来很糟糕。

我想只隐藏包含文字.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");
      }
    });
  });
});

也许如果有办法包含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

您可以在此处看到重叠：overlapping text

Z-index解决方案可以正常工作，但目前它不适合我的网站，因为图像被设置为背景，包含内容的部分滚动到顶部（视差滚动），所以我不能对图像背后的文本进行z索引。也许一个只在某个时刻激活的响应式div才能解决这个问题？

Answer 1

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

solution diagram

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

1 个答案: