navbar stays in top when width of windows is very small

I created a fixed navbar that stays in top when I scroll down after 300 px. however.

What I want to achieve is that when the browser window gets very small the navbar just appears on top from the beginning of the page.

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

This is what happen when the window gets very small