滾動事件不更新的背景風格。（非jQuery）

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

如果我安慰它。該功能運作良好。但是，當我檢查元素。它沒有任何反應。滾動事件不更新的背景風格。（非jQuery）

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

滾動它，你可以看到我在說什麼。

注意：我不在這個項目中使用jQuery。

感謝那些會幫助的人。

來源

2016-08-26 Lara Belle

你有盈餘0.在你的風格。

試試這個：rgba(0,0,0,'+calc+')

來源

2016-08-26 08:15:23 PerfectPixel

工作就像魅力的伴侶。非常感謝。我會在10分鐘內接受你的回答。我不知道爲什麼stackoverflow需要我等10分鐘。 –

不客氣:-) – PerfectPixel

你鈣已經擁有領先的。請將您的代碼更改爲：

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

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

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

來源

2016-08-26 08:17:34

滾動事件不更新的背景風格。 （非jQuery）

回答

相關問題

滾動事件不更新的背景風格。（非jQuery）