Changing color after scrolling past specific div

Question

I'm trying to achieve a certain change in one of my div's upon scrolling past another div. To explain, I wish to change the color of my hamburger menu from white to black upon scrolling past the header image. I've tried to achieve this by changing the CSS after an X amount of pixels, but this approach produces different results based on the viewport size. As I'm aiming to have the effect remain the same across multiple devices, ie maintaining responsiveness, this isn't an option.

An example of what I'm trying to accomplish can be found here:

http://altcph.dk/

The espcially interesting part about this example is that when you place the menu icon on the exact dividing line between the header and the following div, the upperhalf remains white, whilst the bottom half already changes color. I'd be especially interested in achieving this, but I am at an absolute loss on achieving this effect.

Answer 1

The site you shared actually uses more than one menu. The menu is positioned absolutely, once in the header (with the white color) and again outside of the header (in blue). The header is stacked above the rest of the elements in the page (z-index: 3) so it covers up the blue menu. As the header scrolls up, the white menu below appears.