Dynamic header: how to hide header when scrolling down and show when scrolling up

Hi

I have two questions I would love some help on! And thank you in advance!

I currently have a fixed header that stays put as you navigate through each page but would like it to disappear when scrolling down and reappear when scrolling up? I have searched and tried lots of different code variations and nothing works. Can anyone help?

A more complex idea, but I do not know if possible is I would like to do the same as https://www.thetrove.co.uk  - where the header banner changes into a smaller header upon scrolling down and reappears when scrolling up. Is this possible of squarespace 7.1

Thank you so so much!

#1. When you enable Fixed Header, it has 2 options: Basic, Scroll Up. You can choose Scroll Up.

#2. This is possible, require some CSS code, if you share site url, we can check easier

Hi thank you so much! 

I have shared the site URL below for help on #2 - please let me know what you think! Thank you.

You can enable scroll header then use this code to Website Tools (under Not Linked) > Custom CSS

header#header, header#header img, header#header.shrink img {
    transition: all 0.3s;
}
header#header.shrink img {
    width: 30px;
}