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

我有一个导航条，我试图使它贴后，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>

我在stack overflow上看到过很多关于这个的问题，几乎每个人的答案我都试过了，但对我来说都不管用。

最佳答案

尝试删除内联样式

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

来自#nav
我认为position:relative覆盖了您试图使用.append类进行的定位。