在处理另一个元素时逐渐填充 div答案

【问题标题】：Fill a div gradually when going on another element在处理另一个元素时逐渐填充 div
【发布时间】：2015-10-15 17:07:51
【问题描述】：

我希望设置一个菜单，该菜单会根据其在网站上不同 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

【问题讨论】：

我不确定您是否需要transition。如果您将transition:all 0.5s; 添加到.menu 的CSS，它的行为是否符合您的要求？或者你想要的是将盒子的一半用一种颜色，而另一个用另一种颜色？
不完全是，这是一个不错的选择，但我真的希望只要盒子向下进入 div ，它会填充对比色，而不影响盒子的其余部分留在第一部分.在使用过渡的情况下，如果滚动速度不够快，则框变为，在这种情况下为白色，并且仅根据其一半位置可见

标签： jquery html css

【解决方案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/

【讨论】：

绝妙的解决方案！这正是我想做的。非常感谢。
哦，你的答案完全击败了我哈哈。要去投票并删除我的。干杯。

【解决方案2】：

一种可能的解决方案：
为背景色添加过渡时间，
当菜单介于两者之间时，添加一种中间颜色。
如此处：JSFiddle

CSS：

transition: background-color 1s;

JS：

$(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 if ($(".menu").offset().top < ($(".blue").offset().top - 50)){
    $(".menu").css("background-color", "#6C7E8F");
    }
else{
    $(".menu").css("background-color", "#ecf0f1");
}

});

【讨论】：