Javascript 将滚动位置附加到div的不透明度

我有3个div，第一个是固定的，第二个在滚动上改变不透明度，直到它在同一个位置，然后修复自己。第三个等待，直到第二个被定位，然后改变它的不透明度，直到它在相同的位置，并修复自己

问题是第三个div总是以50%的不透明度开始

这是一个JSFIDLE-

下面是脚本和有问题的代码行

$("document").ready(function (e) {

var bluetop = $(".pink-bg").outerHeight();
var greentop = $(".pink-bg").outerHeight() + $(".blue-bg").outerHeight();
var footertop = $(".pink-bg").outerHeight() + $(".blue-bg").outerHeight() + $(".green-bg").outerHeight();

var headerHeight = $(".header-container").outerHeight()

$(".blue-bg").css("top", bluetop);
$(".green-bg").css("top", greentop);
$(".approach-section").height(footertop);

$(".pink-bg").css("position", "fixed");

$(".blue-bg, .green-bg").append("<div class='color-bg'></div>");

var bluedistance = $('.blue-bg').offset().top,
    greendistance = $('.green-bg').offset().top;

$(window).scroll(function () {
    var st = $(this).scrollTop();


    if (st + headerHeight >= bluedistance) {
        $(".blue-bg").css({
            "position": "fixed",
            "top": headerHeight
        })
    } else {
        $(".blue-bg").css({
            "position": "absolute",
            "top": bluetop
        })
    }
    if (st + headerHeight >= greendistance) {
        $(".green-bg").css({
            "position": "fixed",
            "top": headerHeight
        })
    } else {
        $(".green-bg").css({
            "position": "absolute",
            "top": greentop
        })
    }

    /* avoid unnecessary call to jQuery function */
    if (st + headerHeight <= bluetop) {
        $(".blue-bg .color-bg").css({
            'opacity': (1 - st / bluetop)
        });
    }

    if (st + headerHeight >= bluetop) {
        var halfScroll = st / 2;
        $(".green-bg .color-bg").css({
            'opacity': (1 - halfScroll / bluetop)
        });
    }

});

$（“文档”）.ready（函数（e）{
var bluetop=$（“.pink bg”）.outerHeight（）；
var greentop=$（“.pink bg”）.outerHeight（）+$（.blue bg”）.outerHeight（）；
var footertop=$（.pink bg”）.outerHeight（）+$（.blue bg”）.outerHeight（）+$（.green bg”）.outerHeight（）；
var headerHeight=$（“.header容器”）.outerHeight（）
$（“.blue bg”）.css（“top”，bluetop）；
$（“绿色背景”）.css（“顶部”，绿色顶部）；
$（“.approach section”）。高度（页脚顶部）；
美元（“.pink bg”）.css（“位置”，“固定”）；
$（“.blue bg，.green bg”）。追加（“”）；
var bluedistance=$（'.blue bg'）.offset（）.top，
绿色距离=$（'.green bg'）.offset（）.top；
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
如果（st+车头高度>=蓝距）{
$（“.blue bg”）.css({
“位置”：“固定”，
“顶”：头球
})
}否则{
$（“.blue bg”）.css({
“位置”：“绝对”，
“顶部”：bluetop
})
}
如果（st+车头高度>=绿色距离）{
$（“.green bg”）.css({
“位置”：“固定”，
“顶”：头球
})
}否则{
$（“.green bg”）.css({
“位置”：“绝对”，
“顶部”：绿色顶部
})
}
/*避免不必要地调用jQuery函数*/
如果（st+headerHeight=bluetop）{
var半滚动=st/2；
$（“.green bg.color bg”）.css({
“不透明度”：（1-半滚动/蓝顶）
});
}
});

}))

我已经看了这个问题，但没有运气-

---

有什么建议吗？

如果第二个

是绿顶，不是应该吗

if (st + headerHeight <= bluetop) {
    $(".blue-bg .color-bg").css({
        'opacity': (1 - st / bluetop)
    });
}

if (st + headerHeight >= greentop) { <!-- CHANGE HERE -->
    var halfScroll = st / 2;
    $(".green-bg .color-bg").css({
        'opacity': (1 - halfScroll / greentop) <!-- CHANGE HERE -->
    });
}

if（st+headerHeight=greentop）{
var半滚动=st/2；
$（“.green bg.color bg”）.css({
“不透明度”：（1-半滚动/绿色顶部）
});
}

更新：

if (st+headerHeight <= greentop) {
  var halfScroll = st*2;
  $(".green-bg .color-bg").css({ 'opacity' : (2 - halfScroll/greentop) });
}

if（st+headerHeight）绿顶在开始时是pinkheight+blueheight-因此绿色的开始位置仍然从灰色跳到绿色，没有过渡褪色