JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="http://webfordesigners.net/micdn/waypoints/lib/jquery.waypoints.min.js"></script>
<div id="page-container" class="header-fixed-top collapse-header">

    <!-- Main Header -->
    <header class="fixed-top">
        <div class="brand">
            <div class="brand-holder">
                <div class="brand-img">
                    <img src="https://www.greensock.com/forums/uploads/packages-0451787001407339657.png" alt=""/>
                </div>
            </div>
        </div>
        <div class="header-content">

            <div class="my-container">
                <div class="col-sm-8">

                    <form class="hide-element">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                    </form>

                </div>
                <div class="col-sm-4">
                    <ul class="nav nav-pills">
                        <li role="presentation" class="active"><a href="#">Home</a></li>
                        <li role="presentation"><a href="#">Profile</a></li>
                    </ul>
                    <div class="input-group hide-element">
                        <span class="input-group-btn">
                           <button...

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
p {
    color: brown;
    margin: 0;
}
.fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}
#page-container {
    width: 100%;
}
.brand img {
    height: 70px;
}
#page-container.header-fixed-top {
    padding: 140px 0 0;
}
header {
    background: violet;
    height: 140px;
}
#sidebar {
    background: deeppink;
    width: 200px;
}
.header-fixed-top #sidebar {
    position: fixed;
    height: 100%;
}
.header-fixed-top #page-content {
    margin-left: 200px;
}
.my-container {
    width: 100%;
}
#main-container {
    height: 800px;
}
.brand, .header-content {
    display: inline-block;
}
.brand {
    background: cornflowerblue;
}
.brand-holder {
    width: 200px;
    display: table;
    height: 140px;
    text-align: center;
}
.brand-img {
    display: table-cell;
    vertical-align: middle;
}
.header-content {
    background: goldenrod;
    height: 140px;
    position: absolute;
    left: 200px;
    right: 0;
}

JavaScript

$(document).ready(init);

function init() {

    var header, pageContainer, pageContent, brandImage;

    header = $('header');
    pageContainer = $('#page-container');
    pageContent = $('#page-content');
    brandImage = $('.brand img');

    //functions
    collapseHaeder();


    function collapseHaeder() {
        if (pageContainer.hasClass('collapse-header')) {
            var waypoint = new Waypoint({
                element: document.getElementById('page-content'),
                handler: function (direction) {

                    var elementsToResize = $('header, .brand-holder, .header-content');
                    var hideElms = $('.hide-element');

                    if (direction == 'up') {
                        hideElements(hideElms);
                        resizeHeader(elementsToResize);
                    } else {
                        resizeHeader(elementsToResize);
                        hideElements(hideElms);
                    }
                }
            });

        }
    }


    function resizeHeader(elemts) {
        var newHeight = 45;
        var brandHeight = newHeight - 10;
        var easingEffect = 'Quart.easeInOut';

        if (!elemts.hasClass('resized')) {
            elemts.addClass('resized');

        } else {
            elemts.removeClass('resized');
            newHeight = 140;
            brandHeight = newHeight / 2;
        }
        //header elements  containers
        TweenMax.to(elemts, 1, {
            height: newHeight,
            ease: easingEffect
        });
        //page container padding
        TweenMax.to(pageContainer, 1, {
            paddingTop: newHeight,
            ease: easingEffect
        });
        //brand image
        TweenMax.to(brandImage, 1, {
            height: brandHeight,
            ease: easingEffect
        });
    }

    function hideElements(hiddenElement) {
        var classHidded = 'has-hided';
        if (!hiddenElement.hasClass(classHidded)) {
           ...