滚动事件不更新的背景样式。 （非jQuery的）

Question

var nav = document.getElementsByTagName('nav')[0];

window.onscroll = function(){
    var supportPageOffset = window.pageXOffset !== undefined,
        isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat'),
        top = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop,
        calc = Math.abs(1 - (top + 200) / 200);

    if(calc <= '1'){
        nav.style.background = 'rgba(0,0,0,0.'+calc+')';

        console.log('rgba(0,0,0,0.'+calc+')');
    }
}

如果我安慰它。功能很好。但是当我检查元素时。它没有任何反应。

JSFiddle：https://jsfiddle.net/238rjf9a/1/

滚动它，你可以看到我在说什么。

注意：我不会在这个项目中使用jQuery。

感谢那些愿意帮助的人。

Answer 1

你的风格有盈余 0。。

试试这个：rgba(0,0,0,'+calc+')

Answer 2

您的 calc 已经有前导 0 。请将您的代码更改为：

if(calc <= '1'){
    nav.style.background = 'rgba(0,0,0,'+calc+')';

    scr.innerHTML = 'Srolled = rgba(0,0,0,'+calc+')';
}

小提琴：https://jsfiddle.net/238rjf9a/2/