Блог

У меня на моей странице есть заголовок div, который позиционируется: фиксированный и по умолчанию установлен на 50% прозрачный, и при прокрутке вниз прозрачность переходит в непрозрачное состояние. Теперь прозрачность по умолчанию 50% устанавливается не через CSS напрямую, а через функцию JS ниже. В Chrome прозрачность 50% отображается отлично и исчезает, а также при прокрутке вниз. Но в Firefox, когда страница загружается, 50% прозрачности отсутствует, но при прокрутке вниз отображается непрозрачное состояние, а при прокрутке назад появляется прозрачность, но я хочу, чтобы она была там, как только страница загружается в Firefox.

Я пытался использовать filter:opacity=x, но это только для IE. RGBA поддерживается всеми браузерами, так что это не проблема, и я также использовал префикс поставщика -moz-transition, но это тоже не сработало.

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