Minimal theme: Hide sticky header when scroll down

[thevista888]

Hello, in minimal theme there's no sticky header in default settings.
I added it by using those codes;

.header-bar {
    position: fixed;
    z-index: 999;
    width: 100%;
}
header.site-header {
    padding-top: 100px;
}

It works just fine but also I'd like to hide it when scroll down. I tried many codes that are on this forum and also on the web, nothing changed.
My store link: https://wiggleduck.com/ 
Thank you.

[Kinjaldavra]

hello @thevista888 

Please add the following code at the bottom of your assets/theme.css for the mobile.

.header-bar {
   position: relative !important;
}

[thevista888]

Hello @Kinjaldavra 

It didn't work, it cancelled the sticky header

[KetanKumar]

@thevista888 

try this code

https://codepen.io/JGallardo/pen/lJoyk 

[thevista888]

@KetanKumar 

I'm not sure if this is what I'm looking for, in the example of the code, the header is always visible on the top. I should make it visible when scrolling up and invisible when scrolling down.
I found this one on the web, that's a perfect example of what I'm looking for, but I need little guidance to apply it. I tried to add the "JS" codes to the theme.js file.
It did not work. I guess I should edit html&css too, I'm not sure, how can i apply it?

[KetanKumar]

@thevista888 

yes modification header code as per demo that work custom changes