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 .