Question

我有一个这个导航栏，我试图在100px向下滚动后修改它，我已经为此尝试了很多教程，但看起来它对我的代码没有任何影响。

任何帮助都将受到极大的赞赏。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

尝试删除内联样式

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

来自#nav

我认为位置：relative会覆盖你试图用.affix类做的定位。

navbar affix对navbar没有影响

1 个答案: