The code below will allow you to create a sticky function for your main header which shows only when scrolling up. Here is a basic example of what that would look like - https://cl.ly/oUZW - the concept is very simple. The javascript adds a "myprefix-maybe-sticky" class to the header when you scroll past the header and then we use CSS to give this a fixed position and an opacity of 0 so it's hidden. Then whenever you scroll up the script it adds a "myprefix-show" class which we then use via CSS to give the header an opacity of 1 so it's visible.
add_action( 'wp_head', function() { ?>
<style>
.myprefix-maybe-sticky {
position: fixed !important;
top: -100px;
width: 100%;
z-index: 999;
opacity: 0;
background: #fff;
transition: 0.3s all;
box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}
.myprefix-show {
top: 0;
opacity: 1;
}
</style>
<?php } );
add_action( 'wp_footer', function() { ?>
<script>
( function( $ ) {
'use strict';
var $window = $( window );
var lastScrollTop = 0;
var $header = $( '#site-header' );
var headerBottom = $header.position().top + $header.outerHeight( true );
$window.scroll( function() {
var windowTop = $window.scrollTop();
// Add custom sticky class
if ( windowTop >= headerBottom ) {
$header.addClass( 'myprefix-maybe-sticky' );
} else {
$header.removeClass( 'myprefix-maybe-sticky' );
$header.removeClass( 'myprefix-show' );
}
// Show/hide
if ( $header.hasClass( 'myprefix-maybe-sticky' ) ) {
if ( windowTop <= headerBottom || windowTop < lastScrollTop ) {
$header.addClass( 'myprefix-show' );
} else {
$header.removeClass( 'myprefix-show' );
}
}
lastScrollTop = windowTop;
} );
} ( jQuery ) );
</script>
<?php } );