带有 CSS 视差滚动页面的消失/移动导航答案

【问题标题】：disappearing/moving nav with CSS parallax scrolling page带有 CSS 视差滚动页面的消失/移动导航
【发布时间】：2014-11-06 20:04:37
【问题描述】：

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

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

在添加链接之前，导航栏会保持原位；单击链接后，页面转到该位置，但导航栏消失在其他 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>

这是与导航 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 后面。我只是希望我的导航保持在顶部并且可见..

感谢任何帮助，谢谢！

【问题讨论】：

你能发布一个工作小提琴吗？ jsfiddle.net
如果链接有问题，请告诉我——这是我第一次使用这个网站。 codepen.io/clcole345/pen/OPLGeb

标签： html css

【解决方案1】：

答案是如此简单——我绝对不应该花这么长时间来弄清楚这一点。

我刚刚添加到：

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

pBody {
    z-index: -5000;
}

但是，这确实会导致导航栏覆盖侧面的滚动条——这并不是一个大问题，因为它大部分时间都在工作。

没关系，我要去谷歌看看能不能找到一些答案。但是，如果有人对如何防止导航栏覆盖滚动条有任何见解，我会全神贯注。

【讨论】：