JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<nav id="top_nav" class="grid wfull bg-white--alpha" style="top: 273px; position: fixed; z-index: 1000;">navigation</nav>
<div class='wrap'></div>

CSS

.wrap {height:3000px;width:100%;background:green;}

JavaScript

var h_hght = 273; // высота шапки
var h_mrg = 0; // отступ когда шапка уже не видна
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
var elem = $('#top_nav');
if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
} else {
elem.css('top', h_mrg);
}
});
});