Javascript 滚动导航栏不显示'；t在#三角形左三角形元素上更改颜色

我已经创建了一个固定的导航栏，它位于窗口的左侧，当你向下滚动页面时，它的颜色会根据它悬停在哪个div上而改变

当它滚动到位于顶部.hero div层左侧的div#三角形上时，它可以在任何地方正常工作

我希望导航从白色开始，当它位于白色三角形左div上方时变为黑色

我在下面创建了一个js提琴，如果有人愿意，我还包括了一个github回购协议

HTML:

JavaScript:

function logoSwitch () {
      $('.altLogo').each(function() {
        $(this).css('top',
          $('.startLogo').offset().top -  $(this).closest('.row').offset().top
        );
      });
    };

    $(document).scroll(function() {logoSwitch();});

    logoSwitch();

如果你需要更多的信息，请让我知道，我会很高兴编辑后，给你

非常感谢

---

Luke

您需要定义

z-index

顺序。用最少的代码量定义容器是最简单的方法

 .hero nav.nav.startLogo {
    z-index: 1;
    }
 .hero {
    z-index: -2;
    }
 footer{
    z-index:-3;
    }

因为您的页脚已经有一个

z-index:-1的值我们不得不将其重新定义为
z-index:-3

要将该部分中的文本变为黑色，只需从下面更新html即可

<nav class="nav black startLogo">

（我把新的CSS放在上面js fiddle链接的样式表底部。）
嗨，帕特里克，谢谢你的帮助。如果我不能让它保持白色，我可能不得不选择顶部的黑色。我觉得我解释得不够清楚，对不起。我已经更新了这个问题，但是我想让导航从白色开始，然后像其他div一样，在滚动时变为黑色。非常感谢您迄今为止的帮助，我真的很感激。您的意思是一切都很好，但在粉红色三角形中，您希望文本为白色？是的，粉红色三角形中的文本为白色。但是当它滚动到左边名为#triangle left的白色三角形div上时，我希望它变为黑色。这是因为它都在.hero容器中吗？我是否需要从.hero容器中删除剩余的#三角形？我知道你在做什么。你只是不能这样做与边界阻止文本。用那种方法是不可能的。我会考虑做一个三角形的SVG，这样你就可以在没有边界问题的情况下适当地覆盖相应的导航。我将试一试，完成后报告我的发现。谢谢你迄今为止的帮助。我对网络开发还比较陌生，所以有别人的意见就好了。非常感谢你的帮助和时间。
 .hero nav.nav.startLogo {
    z-index: 1;
    }
 .hero {
    z-index: -2;
    }
 footer{
    z-index:-3;
    }

<nav class="nav black startLogo">

<nav class="nav white startLogo">

.hero nav ul li a {
    color: black;
}