滚动某个 div 后固定的引导响应导航栏答案

【问题标题】：Bootstrap responsive navbar that becomes fixed after scroll a certain div滚动某个 div 后固定的引导响应导航栏
【发布时间】：2015-04-03 16:53:09
【问题描述】：

我正在尝试做类似这个网站http://www.rocketmill.co.uk/ 的事情。我需要在导航栏到达顶部时对其进行修复，但没有为上面的 div 提供任何固定高度（在链接的情况下为橙色），因为它具有响应性，并且当屏幕尺寸减小时高度会发生变化。

【问题讨论】：

【解决方案1】：

我建议您使用 Bootstrap affix 而不是为此编写新的 javascript。

您只需要像这样将适当的属性添加到您的导航栏：

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="200" role="navigation">
  --your navbar markup here--
</nav>

其中200 是从顶部算起的像素。

现在只需将其添加到您的 css 中：

.affix  {
  position: fixed;
  --other properties--
}

并且导航栏应该在滚动时使用.affix 属性。

【讨论】：

【解决方案2】：

这是来自sticky.js的代码

  <script>
    $(window).load(function(){
      $("#myHeader").sticky({ topSpacing: 0 });
    });
  </script>

【讨论】：