[ad_1]
Hi guys!
I would like to have help with the following scenario on my website (www.moin-zen.com) :
I want a sticky header, which is transparent while on top of the website (not scrolled down) like here:
[https://imgur.com/a/MXiWhna])
And as soon as you scroll down it should have an opacity, like here:
[https://imgur.com/a/gIQVbmZ])So far I´ve have the following code, without the option of changing the transparency.
div.kenta-header-row.kenta-header-row-primary_navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
background-color: rgba(0,0,0,0.4); }
Thank you for your help!
[ad_2]
You can adjust the scrollTrigger variable in JS in order to meet your design. You can also remove the background-color in CSS header element and use opacity instead.
Change Header Color On Scroll Using Pure Javascript