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.

[VintageClique]

Hello i finally got sticky header on my website but i would like to have auto hide when scroll down and sticky when scroll up.
Could be nice because sticky header is blocking too much of content on the website.
Can anyone help? I use brooklyn theme
Website = www.vintageclique.com

[KetanKumar]

@VintageClique 

it can be done custamization.