JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<div id="container">
    <nav>Sticky!</nav>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
</div>

CSS

#container {
  margin-top:200px;
  height:3000px;
}

nav {
  height:50px;
  padding:10px;
  background-color:black;
  color:white;
}

nav.fixed {
  position:fixed;
  top:0px;
  right:0px;
  left:0px;
  z-index:999;
}

JavaScript

var win      = $(window),
    fxel     = $('nav'),
    eloffset = fxel.offset().top;

win.scroll(function() {
    if (eloffset < win.scrollTop()) {
        fxel.addClass("fixed");
    } else {
        fxel.removeClass("fixed");
    }
});