当窗口宽度非常小时，导航栏会保持在顶部

Question

我在300 px之后向下滚动时创建了一个固定的导航栏。但是。

我想要实现的是，当浏览器窗口变得非常小时，导航栏只显示在页面开头的顶部。

(function($) {
  var $navbar = $('.navbar');

  var setCss = function() {
    if($(window).width() < 600) {
      $navbar.css('position', static);
    }
  };

  $(document).ready(function() {
    setCss();
    $(window).position(setCss);
  });
})(jQuery);

#nav_bar {
  position: fixed;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav_bar" class="navbar navbar-inverse " data-spy="affix" data-offset-top="300">
  <div class="container navbar-inner">
    <!-- logo -->
    <div class="navbar-header">
      <a href="#" class="navbar-brand"></a>
    </div>
    <!-- Menue Item -->
    <div>
      <ul class="nav navbar-nav">
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact</a></li>
        {{#if user}}
        <li role="presentation"><a href="/users/logout">Logout</a></li>
        {{else}}
        <li role="presentation"><a href="/users/login">Login</a></li>
        <li role="presentation"><a href="/users/register">Register</a></li>
        {{/if}}
      </ul>
    </div>
  </div>
</nav>

当窗口非常small

时会发生这种情况