JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<body>
    <div class='content-wrapper' id='container'>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><img src="http://lorempixel.com/150/145/" /></p>
                </div>
                </div>
                <nav>
                </nav>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div><div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div><div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>
            <div class='divBlock'>some text...</div>

CSS

.content-wrapper {
    margin: 0 auto;
    max-width: 800px;
    position: relative;
    background-color: #cccccc;
}

nav {
    position: absolute;
	top: 63px;
    margin-top: 5px;
    font-size: 1.3em;
    font-weight: 600;
    list-style:none;
    width:628px;
    margin:5px auto;
    height:43px;
    padding:0px 10px 0px 10px;
    z-index: 10;
    right:0;
    /* Rounded Corners */
    /*border-radius: 10px; */

    /* Background color and gradients */
    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    /* Borders */
    border: 1px solid #002232;
  
    box-shadow:inset 0px 0px 1px #edf9ff;
}

div.divBlock {
    margin: 20px 0;
}
}

JavaScript

$(window).scroll(function (e) {
        $el = $('nav');
        if ($(this).scrollTop() > 80 && $el.css('position') != 'fixed') {
            $('nav').css({ 'position': 'fixed', 'top': '-10px', 'left':'150px', 'right':'0'});
        }
        if ($(this).scrollTop() < 80 && $el.css('position') == 'fixed') {
            $('nav').css({ 'position': 'absolute', 'top': '63px', 'left':'', 'right':'' });
        }
    });