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

Question

我正在尝试创建一个 float 页眉导航菜单和一个 float 页脚导航菜单，两者都是自定义的。但是，我无法弄清楚将它放在代码中的什么位置，以使其不会滚动。

网站在这里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;
}

Answer 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;
}

“fixed”值与 top 属性相结合会将您的导航定位在您网站的顶部，并且在滚动时起作用。

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

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

“fixed”值与 bottom 属性相结合会将您的页脚导航定位在您网站的底部，并且在滚动时起作用。

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