スクロールイベントでバックグラウンドスタイルが更新されません。 （非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

あなたは余分な,があなたのスタイルであります。

これを試してみてください：rgba(0,0,0,'+calc+')

Answer 2

あなたカルクはすでに大手を持っています。

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

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

フィドル：にあなたのコードを変更してくださいhttps://jsfiddle.net/238rjf9a/2/