jquery - 导航栏词缀对导航栏没有影响

Question

我有一个导航栏，我试图在向下滚动 100 像素后添加它，我为此尝试了很多教程，但看起来它对我的代码没有影响。

如有任何帮助，我们将不胜感激。

 $('#nav').affix({
   offset: {
     top: 100
   }
 });

#nav {
  margin: 0;
}
#nav.affix {
  position: fixed;
  top: 0;
  width: 100%;
}

<nav role="navigation" id="nav" class="navbar navbar-static-top" role="navigation" style="position: relative; z-index:0; ">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>
  </div>
  <ul class="nav navbar-top-links navbar-left inpage-links">
    <li class="find-agent-btn"><a href="#" class="fa fa-search-plus"> Find Agents <span class="caret"></span></a>

    </li>
  </ul>
  <ul class="nav navbar-top-links navbar-right inpage-links">
    <li>
      <a href="#home" class="fa fa-home"></a>

    </li>
    <li><a href="#browse" class="fa fa-road"> Browse Property</a>

    </li>
    <li><a href="#map" class="fa fa-map-marker"> Maps</a>

    </li>
    <li><a href="#about" class="fa fa-book"> About</a>

    </li>
    <li><a href="#contact" class="fa fa-phone "> Contact</a>

    </li>
  </ul>
</nav>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

我已经看到很多关于堆栈溢出的其他问题，并且几乎尝试了他们的每个答案，但它对我没有用。

Answer 1

尝试移除内联样式

style="position: relative; z-index:0; "

来自#nav

我认为 position:relative 覆盖了您尝试使用 .affix 类进行的定位。