JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  CONTENT 0
</div>
<div class="navigation">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
<div class="content">
  CONTENT 1
</div>
<div class="content">
  CONTENT 2
</div>
<div class="content">
  CONTENT 3
</div>

CSS

.navigation{
  margin: 0;
  width: 100%;
  min-height: 32px;
  background-color: #000;
  padding: 5px;
}

.content{
  height: 400px;
  border: solid 1px #f0f;
}

.fixed-top{
  position: fixed;
  top: 0;
}

a{
  margin-left: 3px;
  background-color: #fff;
}

JavaScript

$(function()
{
	var navigationYPosition = $('.navigation').position().top;
	 $(window).scroll(function () { 
   var $navigation = $('.navigation');
    if ($(window).scrollTop() > 400) {
      $navigation.addClass('fixed-top');
    }
    if ($(window).scrollTop() < 401) {
      $navigation.removeClass('fixed-top');
    }
  });
});