Resizing browser window creates multiple issues

Hello,
I am having a weird issue with the Sticky Header Effects where, upon browser window resize, the header essentially breaks and stops working.

Intended Behavior:
– Header is sticky to top of page
– Background color is transparent
– Header overlap
– Upon scroll down 100px, change background-color to #ffffff, reduce size of logo and reduce height of header. Referring to this as “shrunken” header for clarity.
– Upon scroll back to top of page, change header back to “default” (larger logo, transparent background, increased header height).

The issue:
After scrolling down 100px+ and triggering the “shrunken” header, upon window resize, the width of the header does not change. Furthermore, after changing window size, the header reverts back to “default” (larger, transparent, overlap, etc) and will not change back to “shrunken” header even after scrolling back to the top of the page, and attempting to scroll down again.

The only way to “fix” this issue is to scroll back to the top of the page and resize the window again. If the window is resized before scrolling back to the top, the issue does not resolve.

I tried using this CSS from the other support thread relating to this issue, but it did not resolve the issues.

.she-header-yes { width: 100%; }

Attaching a video for added clarification.
https://www.awesomescreenshot.com/video/16633398?key=0104c59b1caa9e9679fa98ba4c3ff71c

The page I need help with: [log in to see the link]