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

Question

我有3个div，第一个固定，第二个滚动更改不透明度，直到它处于相同的位置，然后自行修复。 第三个等待直到第二个被放置，然后更改其不透明度，直到它位于相同位置并自行修复为止。

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

这是一个JSfiddle- http://jsfiddle.net/topaz85/aeemdptb/4/embedded/result/

这是脚本和有害的代码行。

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

});

}）;

我看过这个stackoverflow问题，但没有运气- 基于滚动条位置的Div不透明度

有什么建议么？

Answer 1

如果不是第二if是greentop？

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 halfScroll = st*2;
  $(".green-bg .color-bg").css({ 'opacity' : (2 - halfScroll/greentop) });
}

使用您的设置播放，此处的所有三行都进行了一些调整，并且可以正常使用。

看到它的工作... jsFiddle