I think I see your point. In your demo, you are using scrollRefresh in click listener for one specific situation. But I wanted to use me code all over the website, so I don't want to add ScrollTrigger.refresh() on every button that shows some content or so. There can be more situations when the document height changes. That's why I used ResizeObserver, which checks if there are some changes in the size (height) of document. So I guess this is the only possible way.
I've updated my Codepen, now the ResizeObserver is working correctly.
https://codepen.io/jack7cz/pen/abqvpVO
Would you know if there is something I can do with the problem, when header is on the border of two sections (image 1)? When the button is clicked, which at the end fires ScrollTrigger.refresh(), then the whole dark header is shown (image 2) instead of half white / half dark header which is seen on image 1?
Thank you very much for you help :).