JSFiddle - React, Tailwind, and code Playground

by Zubair Mushtaq

HTML

<div class="container">
  <h1>Primary Navigation</h1>
  <div id="sticky-header" class="header">
    <div class="site-brand">Logo</div>
    <nav class="navbar">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </nav>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel molestie velit, ullamcorper sodales elit. Vivamus efficitur libero in commodo pulvinar. Vivamus scelerisque convallis arcu, in laoreet massa viverra a. Ut sodales urna id velit placerat congue. Aliquam et ultricies nisl. Vivamus id metus ut justo accumsan rutrum vitae a lacus. Maecenas et euismod mauris. Aenean feugiat magna sed enim elementum hendrerit. Vivamus porttitor nunc felis, at iaculis nunc cursus vel.</p>
  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ut elit nec enim aliquet euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In placerat risus vitae neque hendrerit, sed semper nisl aliquet. In fringilla purus vitae ligula facilisis, et sodales purus congue. Cras pretium id nisi a pulvinar. Morbi eu rhoncus magna. Phasellus eu arcu diam. Aliquam a neque sit amet nulla consectetur interdum sit amet ac eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris gravida magna urna, sed consectetur mauris semper eu. Ut a dolor dui. Aliquam quis ante id ligula malesuada porttitor at vel felis. Donec nisi arcu, eleifend id magna volutpat, tempor fringilla elit.</p>
  <p>Proin mauris mi, cursus non varius non, semper volutpat mi. Nunc non consectetur nisi, ac facilisis dolor. Sed erat urna, pharetra tincidunt elementum et, egestas id libero. Mauris suscipit elementum sapien. Suspendisse at pretium nisi. Nullam rhoncus orci non venenatis lacinia. Suspendisse sed lacus vitae ligula rhoncus dapibus. Sed pharetra turpis...

CSS

body {
	min-height: 300vh;
	font-family:'Roboto';
	background-color:#4FC2E5;
	color:#fff;
}
p {
	font-family:1.2em;
	line-height:1.8
}
.container {
	max-width: 728px;
	margin: 50px auto;
}
.header {
	width: 100%;
	float: left;
	background: #232323;
}
.site-brand{ width: 20%; float: left; padding-left: 20px;}
.navbar{ width: 80%; float: right; }
h1 {
	margin: 70px auto
}
.sticky-header {
	position: fixed;
	top: 0;
	left: 0;/*  transition-property: width, border-radius, background-color;
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);*/
	
}
.navbar ul {
	display: flex;
	margin: 0;
	padding: 0;
}
.navbar ul li {
	display: block;
	flex: 1;
	text-align: center;
	font-size: 24px;
	padding: 12px 0;
	font-family: 'Helvetica Neue', sans-serif;
}
.navbar ul li a {
	color: #fff;
	text-decoration: none;
}

JavaScript

/**
 * Simple Sticky Header
 *
 * More info: https://github.com/oenstrom/simple-sticky-header/
 *
 * @author Olof Enström
 * @version 0.9.0
 * @copyright Olof Enström 2017
 * @license GPL-3.0+
 * https://github.com/oenstrom/simple-sticky-header/blob/master/LICENSE
 */
(function($) {
    $.fn.simpleStickyHeader = function(options) {
        var that = this;
        var headerOffsetTop = that.offset().top;

        var settings = $.extend({
            class: "sticky-header"
        }, options);

        var toggleFixedClass = (function toggleFixed() {
            that.toggleClass(settings.class, $(window).scrollTop() >= headerOffsetTop);
            return toggleFixed;
        })();

        $(window).scroll(toggleFixedClass);

        return this;
    };
}(jQuery));


$(function() {
            $("#sticky-header").simpleStickyHeader();
        });