Invert logo color for first section on page only?

SOLVED: with code from this post:

I modified the code. This is what I used to achieve a color-changing logo on scroll. However, I still need to figure out how to make the burger menu change color on scroll too.

/* Change logo on scroll */
.shrink .header-title-logo img {
visibility: hidden;
transition: all 0.3s;
}
.shrink .header-title-logo a {
background-image: url(https://static1.squarespace.com/static/65a2d78aa72f1c4f2b2f30fe/t/6614307825e9e667d79278b4/1712599160701/Kristy-Burrell-Photography-Vermont-Wedding-Photographer-Logo-Black.png);
background-size: contain;
background-repeat: no-repeat;
}