jquery - 在继续另一个元素时逐渐填充一个 div

Question

我希望设置一个菜单，该菜单会根据其在站点的各个 div 上的位置逐渐改变颜色。我们从白色 div 上的蓝色框开始，当您到达第二个黑色 div 时，逐渐将框移到白色。

但是，如果框保留在这两个 div 之间，则每个溢出的 div 分别需要 50/50 的相反颜色。

我可以根据颜色改变状态，但我不能使颜色平滑过渡，而是突然。

这是演示:

$(window).scroll(function () {
    console.log($(".menu").offset().top);
    console.log($(".blue").offset().top - 30);

    if ($(".menu").offset().top < ($(".blue").offset().top - 100)) {
        $(".menu").css("top", "30px");
        $(".menu").css("background-color", "#34495e");
    } else {
        $(".menu").css("background-color", "#ecf0f1");
    }
});

body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.white {
  width: 100vw;
  height: 800px;
  background-color: #ecf0f1;
}

.blue {
  width: 100vw;
  height: 800px;
  background-color: #34495e;
}

.menu {
  position: fixed;
  left: 100px;
  top: 20px;
  width: 100px;
  height: 100px;
  background-color: #34495e;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="white"></div>
<div class="blue"></div>
<div class="menu"></div>

预先感谢您的回答和提示。

我添加一张图片寻求帮助: http://img11.hostingpics.net/pics/383878example.jpg

Answer 1

你的菜单 div 的渐变背景怎么样？

$(window).scroll(function () {
    var menu = $(".menu");
    var blue = $(".blue");
    var gradient;
    var line;
    console.log(menu.offset().top);
    console.log(blue.offset().top - 30);

    if (menu.offset().top < (blue.offset().top) - 100) {
        menu.css("top", "30px");
        menu.css("background", "#34495e");
    } else if (menu.offset().top < blue.offset().top) {
        line = blue.offset().top - menu.offset().top;
        gradient = "linear-gradient(to bottom, #34495e " + line + "px,#ecf0f1 " + line + "px)";
        menu.css("background", gradient);
    } else {
        menu.css("background", "#ecf0f1");
    }
});

http://jsfiddle.net/49xhszhx/