title: I can't making the navigation bar stick to top when scrolling
body: <p>I am new in fronted and I buy and following course from Udemy. 
  Maybe problem is because Instructor used bootstrap alpha 4 version, I using alpha 6.  </p>
  
  <p>I can't just set up <code>postion:fixed</code> for navbar with top of page, my nav bar have 970px margin top, and when I scrolling want to nav be 970px from top and from bottom 971px, and that is problem.
  Here is picture of navbar:</p>
  
  <p><img src="https://i.stack.imgur.com/QP3SA.jpg" alt="enter image description here"></p>
  
  <ol>
  <li><p>index.html file:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;title&gt;First website&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;section id="cover"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;div class="lead wall-sticker"&gt;
                          we. &lt;br&gt; plant. &lt;br&gt; trees. &lt;br&gt;
                          &lt;a href="#"&gt;
                              &lt;button type="button" class="btn btn-success-outline my-2 my-sm-0 text-white"&gt;Learn more&lt;/button&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;h1 class="moto"&gt;For &lt;span class="bold-green"&gt;every&lt;/span&gt; item sold, we plant 1 tree.&lt;br&gt;&lt;br&gt;Want to become a &lt;span class="green-underline"&gt;part&lt;/span&gt; of it?&lt;/h1&gt;
                      &lt;a href="#"&gt;&lt;i class="fa fa-arrow-down"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse" id="main-nav"&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="js/main.js"&gt;&lt;/script&gt;
  </code></pre></li>
  <li><p>I have main.js file, there are:</p>
  
  <pre><code>$(document).ready(function() {
    $(window).scroll(function() {
      if ($(window).scrollTop() &gt; 970) {
        $('.navbar').addClass('navbar-fixed-top');
      }
      if ($(window).scrollTop() &lt; 971) {
        $('.navbar').removeClass('navbar-fixed-top');
      }
    })
  });
  </code></pre></li>
  </ol>