引导响应导航栏在滚动某个div后变为固定

Question

我试图做这样的网站http://www.rocketmill.co.uk/。 我需要在导航栏到达顶部时修复导航栏，但不要给上面的div赋予任何固定高度（在链接的情况下为橙色），因为它的响应性以及当屏幕尺寸减小时高度会发生变化。

Answer 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属性。

Answer 2

这是来自sticky.js的代码

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