Javascript Firefox上未显示标题div不透明度

我的页面上有一个标题div，它的位置是：固定的，默认情况下，设置为50%透明，当你向下滚动时，透明度会淡入不透明状态。现在默认的50%透明度不是直接通过CSS设置的，而是通过下面的JS函数设置的。在Chrome中，50%的透明度可以完美地显示，并且在向下滚动时可以很好地淡出。但在Firefox中，当页面加载时，50%的透明度不存在，但当你向下滚动时，不透明状态显示，当你向上滚动时，透明度出现，但我希望在Firefox中加载页面时，透明度立即出现

我尝试使用filter:opacity=x，但这仅适用于IE。所有浏览器都支持RGBA，所以这不是问题所在，我还使用了-moz transition-vendor前缀，但也不起作用

JS: window.onscroll=滚动

function scroll() {
    var header=document.getElementById("header1");

    console.log(window.pageYOffset);
    if(window.pageYOffset > 50){
        console.log("Change Opacity now");
        header.classList.add('setOpaqueState');
        header.classList.remove('removeOpaqueState');
    }
    else{
        header.classList.remove('setOpaqueState');
        header.classList.add('removeOpaqueState');
    }

}

CSS:

.homepage #header1 {
transition: background 1.0s;
}
.homepage .setOpaqueState {
background-color: #261c3f;
}
.homepage .removeOpaqueState {
background-color: rgba(38, 28, 63, 0.5);
}

---

对我有用：你能详细说明一下吗？这在firefox上有效吗？是的，firefox 30和Nightly（OSX）hmmm…是Puting window.scroll=scroll；功能之外的问题？我不这么认为，但我的问题可能与函数有关，因为基本上默认背景是从if-else条件设置的。那么，显示一个完整的最小示例