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
Post a Comment