Change header background opacity on scroll

I have a fixed header on my site that I’d like to fade in the background opacity from 0% to 100% once the user scrolls past the first strip of content (our hero image). My javascript skills are non-existent - but I scrambled together something that I thought might work, but no dice.

Here’s what I managed so far…

$w.onready(function () {
if wixWindow.scrollTo(0, 500) || $w(‘#rrheader’).style.opacity = ‘0’
}
else {
$w(“#rrheader”).style.opacity = ‘1’;
}
});

Any help would be much appreciated.

2 Likes

I need this option as well. Anyone?

Hi guys

Here is a quick 4min video on how to do this: https://www.wixideas.com/WiX-Ideas/tiaan46/Change-header-color--or-opacity-on-scroll

Thank you!

Hi @tiaan ,

The link you shared seems to be broken. Could you please share it again? Thanks!

Best,
Santosh

Yes…please share updated link

https://www.wix.com/corvid/example/sticky-header
https://www.youtube.com/watch?v=7pIUxBnaOWA
https://www.wix.com/corvid/forum/corvid-tips-and-updates/fixed-frozen-header-example