如何根据背景更改汉堡菜单的颜色？

Question

On the page I have many sections:

<section class="white"></section>
<section class="blue-gradient"></section>
<section class="white"></section>
<section class="blue-gradient"></section>
...

And I have fixed the burger menu. I need to change color of the burger depending on background section when we scroll. When the burger on white section - the burger is blue, when the burger on blue section - the burger is white.

Answer 1

You can look at what section is currently visible and toggle the burger menu accordingly:

https://jsfiddle.net/3urpd60s/

$(document).on("scroll",function(){

    var scrollTop = $(document).scrollTop(), 
        elems = $("section"),
        sections = elems.map((i,n)=> $(n).height()),
        tmp = -1, i = 0;

        while(tmp < scrollTop){
           tmp += sections[++i];
        }

    $('#burger').toggleClass("white", !$(elems[--i]).hasClass("white"));    

});