Question

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

网站在http://steppetsgame.com。当我向下滚动时，底部的灰色条应该保持在底部。正如你所看到的那样，它会被某些东西困住，我无法弄清楚如何阻止这种情况发生。

我在wordpress上使用了一个parallaxing主题。

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

＆＃34;固定＆＃34;与顶级属性相结合的值会将您的导航定位在您网站的顶部，并在滚动时起作用。

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

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

＆＃34;固定＆＃34;结合bottom属性的值会将页脚导航定位在站点的底部，并在滚动时起作用。

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

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

1 个答案: