JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div id="wrap">
    <div id="tips"><div class="logo">Logo</div></div>
    <div id="block"><div class="text">Links would show up here</div></div>
    
    <div class="content"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

CSS

body { background-color:#ccc;margin:0; padding:0;color:#fff;} 
#tips { height:50px; width:100%;background-color: #000; opacity:0.8;position: fixed; top: 0; }

#block { margin-top:50px;display:none;height:50px; width:100%;background-color: #000; opacity:0.8;position: fixed; top: 0; }

.content { height: 50px; width:100%; background-color: red; margin-top:100px; }

/* && y < (h*.75)/*

JavaScript

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #wrap
  var h = $('#wrap').height();
  var y = $(window).scrollTop();
  if( y > (h*.0) ){
   // if we are show keyboardTips
   $("#block").fadeIn("slow");
      $(".logo").animate({ "margin-left": "150"});
  } else {
   $('#block').fadeOut('slow'); 
      
  }
 });
})