JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div id="header_nav">
        <a class="type-shift container" href="/">
          <div class="type-shift left"></div>
          <div class="type-shift right"></div>
          <div class="type-shift filler"></div>
        </a>
</div>

CSS

body {
    height:2000px;
    width:100%;
    background-color:black;
}

#header_nav {
    width:100%;
    height:100px;
    background-color:#f1f1f1;
    position:fixed;
    top:0;
    left:0;
}
.top-core {
  background:#f1f1f1;
  top:0;
  position:fixed;
  height:120px;
  width:100%;
  z-index:100;
}
.type-shift-primary-wrap {
  position: fixed; 
  left: 50%; 
  z-index:100000000; 
  width: 30%;
  max-width: 1100px;
  top:80px;
}
.type-shift-secondary-wrap {
  position: relative; 
  left: -50%;
}
.type-shift.container {
  height: 40px;
  margin: 0;
  display: inline;
  padding:0;
}
.type-shift.left {
    display: inline-block;
    float: left;
    width: 105px;
    height: 30px;
    background-image: url("https://static1.squarespace.com/static/5493babde4b05f5b075eb709/54cc0311e4b099b53e5490ca/54cc065ae4b053e57ca5a039/1422657124021/reshyp_typography_left.png?format=500w&storage=local");
  background-size: 105px 30px;
  background-repeat: no-repeat;
  }

.type-shift.filler {
  display: block;
  float: none;
  width: auto;
  height: 30px;
  background-image: url("https://static1.squarespace.com/static/5493babde4b05f5b075eb709/54cc0311e4b099b53e5490ca/54cc070ae4b07a5b4d08d678/1422657290521/reshyp_typography_filler.png?format=500w&storage=local");
  background-size: 105px 30px;
  background-repeat: repeat-x;
}

.type-shift.right {
  display: inline-block;
  float: right;
  width: 105px;
  height: 30px;
  background-image: url("https://static1.squarespace.com/static/5493babde4b05f5b075eb709/54cc0311e4b099b53e5490ca/54cc065ae4b03d0af014e08d/1422657114945/reshyp_typography_right.png?format=500w&storage=local");
  background-size: 105px 30px;
  background-repeat: no-repeat;
}

JavaScript

$(function(){
    $('#header_nav').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        if($('#header_nav').data('size') == 'big')
        {
            $('#header_nav').data('size','small');
            $('#header_nav').stop().animate({
                height:'50px'
            },200);
        }
    }
    else
    {
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().animate({
                height:'100px'
            },200);
        }  
    }
});