I am in the process of designing a header for my website and I would like to make the background transparent automatically when the page loads using JavaScript. So far, I have attempted several methods but none seem to be working as desired. The CSS styles applied in main.css are overriding my attempts.
To tackle this issue, I wrote the following script:
$(window).scroll(function(){
var $top=$(window).scrollTop();
var $nav = $('.navigation');
if($top>80){
$nav.css({
'background-color':'#E6C0E9',
'position':'fixed',
'opacity':'0.9'
});
}
else{
$nav.css({
'background-color':'Transparent',
'position':'absolute'
});
}
});
Although the script successfully changes the background to transparent after scrolling down 80px and then back up, I require it to change immediately upon page load.