JSFiddle - React, Tailwind, and code Playground

by Tom Delalune

HTML

<header role="banner">
    <div class="navbar">
        <div class="navbar-header"> <a class="navbar-brand" href="#">
                <img src="http://static.tumblr.com/4718a35c77fba09573ef30673f45dd2c/yoo3jux/RSgmtozt6/tumblr_static_sprtd_lgof_cmyknoshdw.png"/>							 
            </a>

        </div>
        <div class="collapse navbar-collapse" role="navigation"></div>
    </div>
    <!-- end .navbar -->
</header>
<!-- end header -->
<div id="content" class="clearfix">
    <div class="container">
        <div id="main">
            <p>Ennui meggings next level narwhal drinking vinegar cray. Retro cliche whatever Carles bicycle rights sriracha meggings, ugh dreamcatcher polaroid drinking vinegar. Blog keytar selfies, swag leggings try-hard PBR Schlitz mixtape. Bitters art party shabby chic pickled, gentrify Wes Anderson synth Pinterest mlkshk cornhole actually pour-over Vice. Brooklyn chia cred, slow-carb actually jean shorts cray Tonx Williamsburg. High Life cardigan hoodie, forage gentrify freegan XOXO raw denim typewriter. Semiotics American Apparel skateboard, Wes Anderson pug whatever squid tote bag slow-carb Pinterest sustainable. Direct trade chia Blue Bottle, fixie hashtag High Life Marfa Brooklyn scenester organic crucifix polaroid. Narwhal fap Intelligentsia, Pinterest Godard street art fanny pack direct trade. McSweeney's hella roof party, post-ironic vinyl pour-over cray freegan cornhole chia fixie asymmetrical. Mixtape typewriter post-ironic polaroid Cosby sweater VHS. DIY quinoa Portland skateboard flannel messenger bag. Selvage selfies fixie Wes Anderson butcher try-hard. Blue Bottle mlkshk Neutra meggings, locavore kogi lo-fi sartorial kitsch gentrify. Williamsburg before they sold out Vice pop-up, plaid ugh cred mustache. Hella Helvetica Brooklyn leggings mlkshk literally, scenester pop-up lomo 3 wolf moon. Keffiyeh yr craft beer dreamcatcher, readymade High Life Helvetica synth sustainable. Drinking vinegar pour-over DIY meggings, twee ugh...

CSS

.navbar {
    text-align:center;
    height: 164px;
    min-height: 60px;
    border-bottom: 1px solid #000;
    margin:0;
    position: fixed;
    right: 0;
    left: 0;
    background-color:#fff;
    top:0;
    padding-top:6px
}
.navbar-brand {
    padding:0;
    height:180px;
    margin-left:-80px;
    position: absolute;
    min-height: 80px;
}
.navbar-brand img {
    max-height:100%;
    display: block
}
.navbar-collapse {
    margin-top: 102px;
    background-color:#333;
    height:60px
}
#content {
    padding: 164px 0 0;
}

JavaScript

var logo = $(".navbar-brand");
var logoheight = logo.delay(5000).height();
var container = $(".navbar");
var containerHeight = container.height();
var navTop = $(".navbar-collapse");
var scrollpos;

$(window).scroll(function () {
    scrollpos = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0;
    if (scrollpos < 0) {
        scrollpos = 0;
    }
    var resizecontainer;
    if ((logoheight - scrollpos) < 0) {
        resizecontainer = 0;
    } else {
        resizecontainer = (logoheight - scrollpos);
    }
    if (resizecontainer >= (containerHeight / 2)) {
        logo.css({
            height: resizecontainer,
            width: resizecontainer,
            marginLeft: -(resizecontainer / 2)
        });
        navTop.css({
            marginTop: ( (resizecontainer - (containerHeight / 2)));
        });
        container.css({
            height: (resizecontainer - 16)
        });
    }
});