JSFiddle - React, Tailwind, and code Playground

by yeoman

HTML

<nav class="nav"></nav>
<div class="bg"></div>
<!--
Original question is asked on stackoverflow
http://stackoverflow.com/questions/34958369/an-issue-with-jquery-and-safari?answertab=active#tab-top
-->

CSS

.nav {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 60px;
  background: red;
  -webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.nav.active {
  -ms-transform: translateY(-60px);
  -webkit-transform: translateY(-60px);
  transform: translateY(-60px);
}
.bg {
  width: 100%;
  height: 3000px;
  background: white;
}

JavaScript

$(document).ready(function() {

function scrollFunc(el) {
        var el = el;
        $(window).scroll(function() {
            el.addClass('active');
            clearTimeout($.data(this, "scrollCheck"));
            $.data(this, "scrollCheck", setTimeout(function() {
                el.removeClass('active');
            }, 250));
        });
    }
    scrollFunc($('nav'));
    
	
});