How to make header sticky when scrolling up on bullet theme

[SF007]

I am using bullet theme. There is only one option for header sticky. It sticks all the time. I need to make it sticky only scrolls up. When scrolling down, it needs to be hidden. How to do that?

I tried this js code, but not working

// Hide header on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

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

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

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If scrolled down and past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('site-header').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('site-header');
        }
    }
  
    lastScrollTop = st;
}

[George011]

Make sure your header has a fixed or sticky positioning to enable smooth hiding and revealing.

Like this:
header {

position: fixed;

width: 100%;

top: 0;

transition: transform 0.3s ease;

}

I got my header sticky here with this code, you should try it as well.

[Dan-From-Ryviu · Accepted solution]

Hi @SF007 

Please try to add this CSS code to theme.liquid file and check again 

<style>
header.site-header {
position: sticky;
top: 0px;
}
</style>

Make sure you disable the option 'Enable sticky header' in Online store > Themes > Customize > Header