导航栏词缀显示对导航栏没有影响

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 类进行的定位。