JSFiddle - React, Tailwind, and code Playground

HTML

<script src="code.jquery.com/jquery-latest.js"></script>

<div id="top">
<div id="navLeft">Nav Left</div>
<div id="navRight">Nav Right</div>
</div>

<script>
	$(function() {			
		$('#top').scrollUpMenu({'transitionTime': 100});  
	});
</script>

CSS

body {
    height: 4000px;
	text-align: center; 
	margin:0 auto;
}

div#navLeft {
	position:fixed;
	text-align: left; 
	top:25px;
	left:32px;
	width:400px;
	margin:0;
	padding:0;
	z-index:99;
}
div#navRight {
	position:fixed;
	text-align: right; 
	top:25px;
	right:32px;
	width:400px;
	margin:0;
	padding:0;
	z-index:99;
}

#top span {
	white-space: nowrap;
}

#top {
	z-index: 9999;
}

JavaScript

;(function ( $, window, document, undefined ) {

	var pluginName = 'scrollUpMenu';
	var defaults = {
			waitTime: 100,
			transitionTime: 550,
			menuCss: { 'position': 'fixed', 'top': '0'},
			showDelta: 0
	};

	var lastScrollTop = 0;
	var $header;
	var timer;
	var pixelsFromTheTop;

	// The actual plugin constructor
	function Plugin ( element, options ) {
		this.element = element;
		this.settings = $.extend( {}, defaults, options );
		this._defaults = defaults;
		this._name = pluginName;
		this.init();
	}

	Plugin.prototype = {
		init: function () {
			
			var self = this;
			$header = $(this.element);
			$header.css(self.settings.menuCss);
			pixelsFromTheTop = $header.height();
			
			// $header.next().css({ 'margin-top': pixelsFromTheTop });
		
			$(window).bind('scroll',function () {
				clearTimeout(timer);
				timer = setTimeout(function() {
					self.refresh(self.settings);
				}, self.settings.waitTime );
			});
		},
		refresh: function (settings) {
			// Stopped scrolling, do stuff...
			var scrollTop = $(window).scrollTop(); 
			var change = lastScrollTop - scrollTop;

			if (scrollTop > lastScrollTop && scrollTop > pixelsFromTheTop){ // ensure that the header doesnt disappear too early
				// downscroll
				$header.slideUp(settings.transitionTime);
			} else {
				// upscroll
				if ( change > settings.showDelta ) {
					$header.slideDown(settings.transitionTime);
				}
			}
			lastScrollTop = scrollTop;
		}
	};

	$.fn[ pluginName ] = function ( options ) {
		return this.each(function() {
				if ( !$.data( this, 'plugin_' + pluginName ) ) {
						$.data( this, 'plugin_' + pluginName, new Plugin( this, options ) );
				}
		});
	};

})( jQuery, window, document );