Header That Fades on Scroll - Pacific Family

Site URL: https://www.lsankowich.com/

Hello, I'm working on a site for my team's startup.   Trying to create an affect where the banner image shrinks or collapses upon scroll, and the top navigation stays fixed.

The site is currently hosted on a staging site, I'm not adept w/coding so any code snippets or suggestions would be greatly appreciated. 

Add to Home > Design > custom CSS

/* Sticky header */
header#header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 100%;
}

Thank you!!!