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-statement更改为：

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

Answer 2

根据我的浏览器似乎正在做的事情，上述解决方案似乎无法正常工作（请查看http://i.imgur.com/5AbwOuY.png）。

但是，我也尝试了这个，你可以在这里查看：http://jsfiddle.net/RrBEV/70/

$(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 + oHeight > wTop) {
            var diff = ((oTop + oHeight - wTop) / oHeight);

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

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

当向下滚动javascript时，在页面顶部淡化不透明度

2 个答案: