如何在视差主题上锁定导航菜单

【问题标题】：How to lock a nav menu on a paralaxing theme如何在视差主题上锁定导航菜单
【发布时间】：2015-07-31 08:30:15
【问题描述】：

我正在尝试创建一个浮动页眉导航菜单和一个浮动页脚导航菜单，两者都是自定义的。但是，我不知道将它放在代码中的哪个位置，这样它就不会滚动。

网站在这里http://steppetsgame.com。当我向下滚动时，底部的灰色条应该保持在底部。如您所见，它卡在了某些东西上，我不知道如何阻止这种情况发生。

我在 wordpress 上通过 themify 使用视差主题。

<div class="footer_custom">
    Footer Text/Code
</div>

.footer_custom {
    background-color: #d7d7d7;
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100px;
}

【问题讨论】：

标签： css parallax nav

【解决方案1】：

我不知道我是否理解您想对标题菜单做什么，但要将其放置在您网站的顶部，您可以使用：

#nav-bar {
   background-color: rgba(0, 0, 0, 0.7);
   position: fixed;
   z-index: 9998;
   top: 0px;
   left: 0px;
   width: 100%;
   padding: 0px;
   margin: 0px;
}

结合 top 属性的“固定”值会将您的导航定位在您网站的顶部，并且在滚动时有效。

对于您的页脚菜单非常相似：

.footer_custom {
   background-color: #D7D7D7;
   position: fixed;
   z-index: 9999;
   bottom: 0px;
   left: 0px;
   width: 100%;
   padding: 0px;
   margin: 0px;
   height: 100px;
}

结合底部属性的“固定”值会将您的页脚导航定位在您网站的底部，并且在滚动时有效。

这两种代码都适用于响应式设计。

【讨论】：

不客气@TimCooley。如果您不明白或需要任何其他帮助，请告诉我