Affix using CodePen (for Portfolio task )

Dear friends,

I can’t understand what I did wrong in my code.
I’m trying to implement affix for the top nav panel, but it doesn’t work, though I duplicated code from the https://www.w3schools.com/bootstrap/bootstrap_affix.asp (horizontal movement).

The navigating panel is 200px away from the top of the page and it doesn’t move through the scrolling.
Sorry if my question seems dummy.

Here is my html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<div>
  <body>
    <div style="height:200px;">shit happens</div>
    <nav class="navbar navbar-default" data-spy="affix" data-offset-top="100">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">BUY</a></li>
        <li id="right"><a href="#">Contacts</a></li>
      </ul>
    </nav>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
    <p>Some text to enable crolling</p>
  </body>
</div>

Thank you in advance,
Dima.

I’m unfamiliar with the affix method, instead, I added the ‘fixed-top’ class to my navbar div. But beware: I had to use weird javascript trickery to fix the spacing (you’ll see what I mean when you use it.) that sort of broke now that I’m looking at it. But, here’s a link to my portfolio anyways, in case it helps: https://codepen.io/TheyLeftMe4Dead/pen/PjvMzx?editors=1010

Thank you very much! It works now.