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

Question

在页面上，我有很多部分：

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

我已经修复了汉堡菜单。滚动时，我需要根据背景部分更改汉堡的颜色。当汉堡在白色部分时-汉堡是蓝色，当汉堡在蓝色部分中时-汉堡是白色。

Answer 1

您可以查看当前可见的部分，并相应地切换汉堡菜单：

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"));    

});