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 opacity based on scrollbar position

有什么建议吗？

Answer 1

第二个if不应该是绿色的吗？

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

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

1 个答案: