滾動時 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';但是當我把它放進去或取出時沒有區別。

為什么我的網站的不透明度在滾動時被切斷而不是淡出？

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;
    }
});