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

Question

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

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

我不知道我是否理解你想用 header 菜单做什么，但是要将它放在你网站的顶部，你可以使用这个：

#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" 值与顶部属性相结合会将您的导航定位在您网站的顶部，并且在滚动时有效。

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

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

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

并且这两个代码都适用于响应式设计。

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

How to lock a nav menu on a paralaxing theme

css

parallax

nav