javascript - Header div opacity not showing on Firefox -


so have header div on page positioned:fixed , default, set 50% transparent , scroll down, transparency fades opaque state. default 50% transparency not set thru css directly rather thru js function below. in chrome, 50% transparency shows , fades fine scroll down. in firefox, when page loads, 50% transparency not there when scroll down,the opaque state shows , when scroll up, transparency comes want there page loads in firefox.

i tried use filter:opacity=x ie. rgba supported browsers that's not issue , used -moz-transition vendor prefix did not work either.

js: window.onscroll = scroll;

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


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -