JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<section id="header"></section>
<section id="content">
  test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/> test
  <br/>
</section>

CSS

section {
  float: left;
  width: 100%;
  background: white;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  height: 500px;
  background: url(http://wallpapercoo.com/wp-content/uploads/2015/11/hd-wallpapers-6J1.jpg) center center;
  background-size: cover;
  transform: translateY(0px);
}

#content{
  position: relative;
  z-index:3;
  margin-top:500px;
}

JavaScript

var oldPosition =	0;
var points = 0;

$(window).on("scroll", function(){
  
  var getScrollPosition = $(window).scrollTop();    
  
  if(oldPosition <= getScrollPosition){
    oldPosition = getScrollPosition;
    
    var transformY = 0 - getScrollPosition,
   			scroll = transformY / 2;
    
   	points = scroll;
    
    // Header
    $("#header").css({"transform": "translateY(" + "" + scroll + "px" + ")"});
    
  } else {
    oldPosition = getScrollPosition;
    
    var transformY = points - getScrollPosition,
   			scroll = transformY / 2;
    
    // Header
    $("#header").css({"transform": "translateY(" + "" + scroll + "px" + ")"});
  }
  
});