javascript - 滚动时 jQuery 不透明度被切断

Question

我有这段代码，旨在在达到一定比例级别时更改图像的不透明度，在这种情况下，当图像比例为 2 时，不透明度应再次降低，但它只是从 1 变为 0并且在滚动时没有很好的过渡。

    var scroll = $(window).scrollTop();
    $(".exteriorImage img").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
          "-webkit-filter": "blur(" + (scroll/100) + "px)",
          filter: "blur(" + (scroll/100) + "px)",
          opacity: 1-(scroll/300)
    });
    var scaleArr = getElementPropety('interiorID', 'transform').split('(')
    scaleStr = scaleArr[1].toString();
    scale = scaleStr.split(',')
    scaleInt = parseFloat(scale, 10);
    $(".interiorImage img").css({
        transform: 'translate3d(-50%, -'+ (scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
        "-webkit-filter": "blur(" - (scroll/100) + "px)",
        filter: "blur(" - (scroll/100) + "px)",
    });
    if (scaleInt < 2) {
        $(".interiorImage img").css({
            opacity: 0+(scroll/300)
        });
    } else {
        document.getElementById('interiorID').style.opacity = '1';
        $(".interiorImage img").css({
            opacity: 1-(scroll/300)
        });
    }
    var currentOpacity = getElementPropety('titleTwoID','opacity');
    $("#titleTwoID").css({
        opacity: 0+(scroll/300),
    });
});

更具体地说，

    if (scaleInt < 2) {
        $(".interiorImage img").css({
            opacity: 0+(scroll/300)
        });
    } else {
        document.getElementById('interiorID').style.opacity = '1';
        $(".interiorImage img").css({
            opacity: 1-(scroll/300)
        });
    }

(我也不需要 document.getElementById('interiorID').style.opacity = '1'; 但是当我把它放入或取出时没有区别。

为什么我的网站的不透明度在滚动时被 chop 而不是淡出？

Answer 1

你可以试试这个:

document.addEventListener('scroll', function(e) {
    if (document.body.scrollTop > 400) {
        var currScrollPos2 = document.body.scrollTop;
        document.getElementById('test').style.opacity = -currScrollPos2/400 + 2;
    }
});