javascript - 向下滚动javascript时淡化页面顶部的不透明度

Question

我需要反转这段代码:

$(window).scroll(function () {
    $('#portfolio-entrybox li').each(function (i) {
        var oTop = $(this).offset().top;
        var oHeight = $(this).outerHeight();

        var wTop = $(window).scrollTop();
        var wHeight = $(window).height();

        if (oTop < wTop + wHeight) {
            var diff = ((wTop + wHeight - oTop) / oHeight);

            if (diff > 1) diff = 1;
            else if (diff < 0) diff = 0;

            $(this).css('opacity', diff);
        }
    });
});

我需要项目在顶部淡出而不是在底部淡出。它们应该以不透明度 100% 开始，当您向下滚动时，它会变为 0%。与这段代码相同的原则只是颠倒了。

Fiddle现场演示。

Answer 1

这是我的做法:

将您的 if 语句 更改为:

if (oTop < wTop) {
    var diff = ((wTop - oTop) / oHeight);

    if (diff >= 1) diff = 1;
    else if (diff <= 0) diff = 0;

    diff = 1 - diff;

    $(this).css('opacity', diff);
}

Updated Fiddle .