Header shrink on scroll

I'm looking to do literally this to my header for my homepage. Any solves I can use with this??

You can try this free plugin:

https://www.ghostplugins.com/steps/shrinking-logo-on-scroll

Thank you so much!! However, is there a way for the site header logo to be more in the middle of the first block? Something like the following: https://www.marikostudio.com/ 

Thank you so much for the reply!!

9 minutes ago, Gigi-C said:

However, is there a way for the site header logo to be more in the middle of the first block? Something like the following: https://www.marikostudio.com/ 

This effect would need coding quite differently, it's not something I have seen before, the logo is in two pieces, I don't have anything I can offer that would give you that look.

Sorry I should’ve been more clear! I don’t want my logo to necessarily come together like that. Just meant more in the way that it’s in the middle of the page. When you create a header on squarespace it’s right at the top. I wanted it to be a bit more centred and then as you scroll it sticks to the top. Any solves for this? 

styled square plugin should achieve this