Shrink Navigation on Scroll

Site URL: https://cow-bellflower-d5mf.squarespace.com

I'm trying to add code that creates a sticky navigation where the logo shrinks and spacing decreases upon scrolling. 

I've been working on this for a few days and nothing I find online seems to help.

Link: https://cow-bellflower-d5mf.squarespace.com

Password: temp2020

I see you solved with JavaScript.

However, in SS 7.1, Squarespace will add new class on scroll. So you can solve with CSS, no need to use JavaScript.

I'd love to know how you fixed this issue!

Actually, here's a fix from the amazing Schwartz Edmisten:

//Shrink Your Logo
.header-announcement-bar-wrapper .header-title-logo img {
    transition: max-height 140ms ease-in-out
}
.header-announcement-bar-wrapper.shrink {
  padding-top: 20px!important;
  padding-bottom: 20px!important;
.header-title-logo img {
    max-height: 40px;
}
}

Source:  https://schwartz-edmisten.com/blog/shrink-logo-on-scroll-in-squarespace-71