Sticky header menu auto hide when scroll down.

[Jermm]

Currently I have a sticky header in my shop I would like the navigation pane to auto hide when i scroll down. can someone help with the code?

[Guleria]

Hello,

Follow this example https://codepen.io/tutsplus/pen/WNerWWp 

thanks

[KetanKumar]

@Jermm 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

[Jermm]

Dierenseizoen.nl

[robin_ca]

Hi you can add this jquery code to add active class, its best way is to see if your page is down more than 100px,

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('header.site-header').slideUp(200);
    }
    else {
       $('header.site-header').slideDown(200);
    }
});

I tested, it with your site, these classes are good to go, you can add script to your header or footer.
Let me know if you need further assistance with it.

[Jermm]

Which template or asset do i need to add the code ?

[robin_ca]

You can include it at the end of theme.liquid before end of body tag or  footer.liquid

<script type="text/javscript">
$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('header.site-header').slideUp(200);
    }
    else {
       $('header.site-header').slideDown(200);
    }
});
</script>

[Jermm]

Sorry for the late reply , i added te code bbut nothing happend.