html - 使用 CSS 视差滚动页面消失/移动导航

Question

http://codepen.io/clcole345/pen/OPLGeb

我工作的网站使用纯 CSS 视差滚动。我在顶部有一个导航栏，高度为 42 像素。我试图将导航栏保持在顶部，而导航栏中的链接是指向页面内 anchor 的链接。

在添加链接之前，导航栏会留在原地；单击链接后，页面转到该位置，但导航栏消失在其他 div 后面。

我找到了这段代码:

/* Keeps nav visible while using anchor links within page------------*/
.calculated-height {
    height: -moz-calc(100vh - 42px);
    height: -webkit-calc(100vh - 42px);
    height: calc(100vh - 42px);
}​

它没有改变任何东西。

我已经这样编码我的链接:

<section name="home" id="home" data-type="background" data-speed="10">...</section>

这是与 nav div 中的任何内容相关联的其余 css:

#headerNav {
    height: 42px;
    width: 100%;
}

#nav {
    width: 35%;
    float: right;
}

#logo img {
    width: 42px;
    height: 42px;
    float: left;
}

#nameTitle {
    width: 25%;
    float: left;
    background-color:#3CC;
    line-height: 42px;
    text-align: center;
}

#nav li {
    display: inline;
    line-height: 42px;
    margin-left: 25px;
}

我最近还注意到，当我刷新页面时(按 F5 并且仅在单击导航栏中的链接之后)，导航栏位于其他 div 的后面。我只希望我的导航保持在顶部并且可见..

感谢任何帮助，谢谢!

Answer 1

答案很简单——我绝对不应该花这么长时间才弄明白。

我刚刚添加到:

header {
    z-index: 5000;
    position: fixed;
    top: 0:
}

pBody {
    z-index: -5000;
}

但是，这确实会导致导航栏覆盖侧面的滚动条——没什么大不了，因为它大部分时间都在工作。

没关系，我会去 Google 看看是否可以在那里找到一些答案。但是，如果有人对如何防止导航栏覆盖滚动条有任何见解，我会洗耳恭听。