JSFiddle - React, Tailwind, and code Playground

by thillin

HTML

<header>
    <div class="logo"></div>
    <div class="nav"></div>
</header>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor...

CSS

html, body {
    margin: 0;
    padding: 0;
}
header {
    width: 100%;
    background: red;
    height: 100px;
    clear: both;
}
.fix {
    margin-top: 115px;
}
.nav {
    float: right;
    height: 14px;
    width: 70%;
    background: yellow;
    margin-top: 50px;
}
.nav.adjust {
    margin-top: 20px;
}
.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
    background: blue;
    height: 60px;
}

JavaScript

$(document).ready(function () {
    var distance = 40;

    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();

        if (scrollTop > distance) {
            $('header').addClass('sticky');
            $('.nav').addClass('adjust');

            $('p').addClass('fix');

        } else {
            $('header').removeClass('sticky');
            $('p').removeClass('fix');
            $('.nav').removeClass('adjust');

        }
    };

    stickyNav();

    $(window).scroll(function () {
        stickyNav();
    });
});