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

Question

I have 3 divs, the first is fixed, the second on scroll changes opacity until it's at the same posisiton and then fixes itself. the third waits until the second is positioned then changes it's opacity until it's at the same position and also fixes itself.

The problem is the third div starts always with 50% opacity.

Here is a JSfiddle - http://jsfiddle.net/topaz85/aeemdptb/4/embedded/result/

Here is the script and offending line of code.

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

});

});

I've looked at this stackoverflow question and have had no luck - Div opacity based on scrollbar position

Any suggestions?

Answer 1

Shouldn't the second if be 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 -->
    });
}

UPDATE :

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

Played with your settings, all three lines here have some adjustment and it works.

See it working ... jsFiddle