JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <header id="page_header">
    <div id="page_header_logo">
      <img id="page_header_logo_img" src="https://jeopardygirl.files.wordpress.com/2007/04/happy-face-happyface-smiley-300x300.gif" />
    </div>
    <nav id="page_nav">
      <ul id="page_nav_ul">
        <li class="page_nav_li">
          A MENU
        </li>
        |
        <li class="page_nav_li">
          WILL GO
        </li>
        |
        <li class="page_nav_li">
          HERE
        </li>
      </ul>
    </nav>
  </header>

  <section class="first_section">
    Bunch of content goes here it will be
    <br /> l
    <br /> o
    <br /> o
    <br /> o
    <br /> o
    <br /> o
    <br /> o
    <br /> n
    <br /> g
  </section>
</div>

CSS

body {
  height: 1000px;
  padding: 0px;
  margin: 0px;
  border: 1px;
  font-family: 'Open Sans', sans-serif;
}

.container {
  width: 100%;
  height: 100%;
}

#page_header {
  background-color: #fff;
  width: 100%;
  height: 30%;
  position: fixed;
  top: 0;
  left: 0;
}

#page_header_logo {
  margin: auto;
  width: 100%;
  height: 80%;
  display: inline-block;
}

#page_header_logo_img {
  padding-left: 0;
  display: block;
  margin: auto;
  height: 100%;
}

#page_nav {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

#page_nav_ul {
  text-align: center;
}

.page_nav_li {
  margin-right: 1%;
  margin-left: 1%;
  text-decoration: none;
  display: inline-block;
}

.first_section {
  padding-top: 30%;
}

JavaScript

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

$(window).scroll(function() {
  if ($(document).scrollTop() > 0) {
    if ($('#page_header').data('size') == 'big') {
      $('#page_header').data('size', 'small');
      $('#page_header').stop().animate({
        height: '10%'
      }, 600);
      $('#page_header_logo').height("65%");
      $('#page_header_logo_img').css({
        "padding-left": "20%",
        "display": "inline"
      })
    }
  } else {
    if ($('#page_header').data('size') == 'small') {
      $('#page_header').data('size', 'big');
      $('#page_header').stop().animate({
        height: '30%'
      }, 600);
      $('#page_header_logo').height("80%");
      $('#page_header_logo_img').css({
        "padding-left": "0",
        "display": "block"
      })
    }
  }
});