Изменение цвета после прокрутки мимо определенного div

Question

Я пытаюсь добиться определенного изменения в одном из моих div при прокрутке мимо другого div. Чтобы объяснить, я хочу изменить цвет меню гамбургера от белого до черного, прокручивая изображение заголовка. Я попытался достичь этого, изменив CSS после X количества пикселей, но этот подход дает разные результаты, основанные на размере видового экрана. Поскольку я стремлюсь к тому, чтобы эффект оставался одним и тем же на нескольких устройствах, т. Е. Поддерживая отзывчивость, это не вариант.

пример того, что я пытаюсь выполнить, можно найти здесь:

http://altcph.dk/

espcially интересная часть этого примера в том, что, когда вы поместите значок меню на точной разграничительной линии между заголовок и следующий div, верхняя половина остается белой, а нижняя половина уже меняет цвет. Я был бы особенно заинтересован в достижении этого, но я нахожусь в абсолютной потере для достижения этого эффекта.

Answer 1

Сайт, который вы использовали, фактически использует несколько меню. Меню позиционируется абсолютно, один раз в заголовке (с белым цветом) и снова за пределами заголовка (синим цветом). Заголовок помещается над остальными элементами на странице (z-index: 3), поэтому он закрывает синее меню. Когда заголовок прокручивается, появляется белое меню внизу.