JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="header"><h1>Header</h1></div>
<div id="content"></div>

CSS

body,html {
    margin:0;
    padding:0;
}
#header {
    background:#000;
    color:#fff;
    height:80px;
    width:100%;
    position:absolute;
    left:0;
    top:0;
}
#content {
    padding-top:80px;
    height:3000px;
    background-color:#efefef;
}

JavaScript

var header = $('#header');
var content = $('#content');

var startY = 0;
var diffY = 0;
var lastY = 0;
var down = false;
$(document).bind('touchstart', function(event){
    var e = event.originalEvent.touches[0];
    startY = e.pageY;
    down = true;
    header.css('opacity', 0.5);
    
})
.bind('touchmove', function(){
    header.css({'top': $(this).scrollTop(), 'opacity':0});
})    
.bind('touchend', function(){
     header.css({'top': $(this).scrollTop(), 'opacity':1});
})
    
    .bind('scroll', function(event){
    
        header.css({'top': $(this).scrollTop(), 'opacity':1});
    });