Question

我希望设置一个菜单，根据它在各个网站上的位置逐渐改变颜色。我们从白色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/

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

}）;

当进入另一个元素时，逐渐填充div

2 个答案: