JSFiddle - React, Tailwind, and code Playground
HTML
<header>
<p>Header</p>
<p>Header</p>
</header>
<nav>
<p>Navigation</p>
</nav>
<main>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
</main>
CSS
* {
margin:0;
}
nav {
height:50px;
width:100%;
background-color:#CCC;
}
nav.fixed {
position:fixed;
top:0;
}
JavaScript
var $header = $('header');
var $nav = $('nav');
var $window = $(window);
var $main = $('main');
var handleSticky = function () {
if($window.scrollTop() >= $header.height()) {
$nav.addClass('fixed');
$main.css('margin-top', $nav.height());
} else {
$nav.removeClass('fixed');
$main.css('margin-top', 0);
}
}
$window.scroll(handleSticky);
$window.resize(handleSticky);