Hide Menu when scroll down and show when user scrolls up (Two type of solutions)

sticky-menu-wix-type

	<script>
		
    /*
    solution 1 - Not so good
    var target = jQuery(".elementor-button-content-wrapper").offset().top,
		timeout = null;

		jQuery(window).scroll(function () {
			if (!timeout) {
				timeout = setTimeout(function () {
					console.log('scroll');            
					clearTimeout(timeout);
					timeout = null;
					if (jQuery(window).scrollTop() >= target) {
						//alert('made it');
						jQuery('.she-header').css({'position':'relative'})
					}
					else{
						jQuery('.she-header').css({'position':'fixed'})
					}
				}, 250);
			}
		});*/
    
		// Hide Header on on scroll down
		var didScroll;
		var lastScrollTop = 0;
		var delta = 5;
		var navbarHeight = jQuery('.she-header').outerHeight();

		jQuery(window).scroll(function(event){
			didScroll = true;
		});

		setInterval(function() {
			if (didScroll) {
				hasScrolled();
				didScroll = false;
			}
		}, 250);

		function hasScrolled() {
			var st = jQuery(this).scrollTop();
			// Make sure they scroll more than delta
			if(Math.abs(lastScrollTop - st) <= delta)
				return;

			// If they scrolled down and are past the navbar, add class .nav-up.
			// This is necessary so you never see what is "behind" the navbar.
			if (st > lastScrollTop && st > navbarHeight){
				// Scroll Down
				jQuery('.she-header').css({'position':'relative'});
			} else {
				// Scroll Up
				if(st + jQuery(window).height() < jQuery(document).height()) {
					jQuery('.she-header').css({'position':'fixed'});
				}
			}

			lastScrollTop = st;
		}
	</script>