修复了位置导航栏不起作用的问题

Fixed position navigation bar not working

本文关键字：不起作用 问题 导航 位置      更新时间：2023-09-26

我正在使用视差jquery插件

视差.js要做的是在文档正文的开头为每个视差图像创建一个固定位置的元素。此镜像元素将位于其他元素后面，并匹配其目标对象的位置和尺寸。

我为导航添加了此标记：

<nav class="nav-inner" role="navigation">
    <a class="navbar-brand" href="#"><img src="img/logo.png"></a>
</nav>

和这个 CSS ：

.nav-inner {
  position:fixed;
  top:0;
  left:0;
  z-index:500;
 }

问题是，当我向下滚动时，导航并没有像我预期的那样固定在页面顶部。

这是一个jsbin，看看会发生什么。

关于如何使导航栏保持固定的任何建议？

只需为所有parallax-mirror元素设置z-index:0

.parallax-mirror {z-index:0 !important;}

或者直接在元素样式属性中更改属性，因为它具有z-index:-100

我通常会以不同的方式制作固定导航栏。这是我的代码。它对我有用：

.CSS：

#navBar
{
    position:fixed;
    top:0;
    left:0;
    right:0;
    color:#000;
    background-color:#fff;
    padding-left:2em;
    opacity:.9;
    z-index:100;
}
#navBar > a (however you reference your child elements)
{
margin:-4px;
}

.HTML：

<div id="navBar"><a href="">anywhere</a><a href="">anywhere</a></div>

如果这不起作用，请告诉我，我会看看我的答案。

由于你已经使用了jQuery，你可以像下面这样找到jQuery插件：http://www.jqueryrain.com/demo/jquery-fixed-header/

相关文章：