JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<img class="logo" src="http://oi68.tinypic.com/2z5m4pu.jpg" />

CSS

body {
  width: 100%;
  height: 1000px;
  margin: 0;
  background: #CCC;
}

header {
  width: 100%;
  height: 60px;
  background: #FFF;
  position: fixed;
  top: -60px;
  opacity: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

span {
  position: fixed;
  top: 100px;
}

img {
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

JavaScript

// Static variables - That do not change while scrolling
var header = $("header"),
    headerHeight = header.height(), // Get height of header
 	 	logo = $(".logo"), // Get the logo
 	 	logoHeight = logo.height(), // Get logo height
 	 	scrollTo = 120; // Animation until scrolled to this point

// Scroll function
$(window).on("scroll", function() {
  // Dynamic variables - That do change while scrolling
  var yPos = $(this).scrollTop(), // Get the scroll Y-position
  	  yPer = (yPos / scrollTo); // Calculate percenage of scroll

  // If percentage is over 100, set to 100
  if (yPer > 1) {
    yPer = 1;
  }
  // Dynamic variables for the elements
  var logoPos = ( -1*(yPer*50)+50), // Calculate position of logo (starting from 50%)
    	logoSize = ((headerHeight*yPer)-(logoHeight*yPer)+logoHeight), // Calculate new size height for logo
    	headerPos = ((yPer * headerHeight) - headerHeight); // Calculate position of header (starting from minus the height of itself)

  // Change the top, left, transform and height of the logo
  logo.css({
    top: logoPos + "%",
    left: logoPos + "%",
    transform: "translate3d(-" + logoPos + "%,-" + logoPos + "%,0)",
    height: logoSize
  });
  // Change the transform and opacity of the header
  $('header').css({
    //transform: "translate3d(0," + headerPos + "px,0)",
		top: headerPos,
    opacity: yPer
  });
});