背景样式在滚动事件时没有更新.(non-jQuery)

Background style not updating on scroll event. (non-jQuery)

本文关键字：更新 non-jQuery 样式 滚动 事件 背景      更新时间：2023-09-26
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。

谢谢你的帮助。

你有盈余0。在你的风格

Try this: rgba(0,0,0,'+calc+')

你的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/

相关文章：