JSFiddle - React, Tailwind, and code Playground

by ojdavey

HTML

<header>
    This is the header
</header>
<div style="background-image: url(http://54.66.162.3/k7/wp-content/uploads/2015/05/home-temp-box.jpg)" class="box col4 img">
    <div class="box-inner">
        <a href="#">
            Read More
        </a>
    </div>
</div>

CSS

header {
    border-bottom: 5px solid #000;
    height: 245px;
    transition: height 0.6s ease;
}
header.small {
    height: 90px;
}
.box {
    background-size: cover;
    padding-bottom: calc(67.857%);
    width: 100%;
}

JavaScript

var complete = false;
$(window).scroll(function() {
    if($(window).scrollTop() !== 0 && !complete) {
        complete = true;
        $("header").addClass("small");
    }
});