Transparent Sticky Nav Bar that changes color on Scroll

[franciscobrito]

Hi, I’, new to this community hope you can help me out. I’ve been developing a new website for a Real Estate brand and I’m developing it on Wordpress using a Theme called “Houzez”.

It is still on an early stage of development but there is something really bothering me that I can’t get right and I think might be easy to get right with code.

I want the Nav Bar to be sticky (which is easy to do on the Theme Options Settings) but I want it to start transparent and to turn black when I scroll down.

I was already able to make it transparent only on the Homepage with code, and it is sticky right now but I was not able to make it change the color when I scroll down.

Here is the link for my website:
https://i4y.a9b.myftpupload.com

Could you help me out? Thank you.

[ladans37]

So, on scroll it will change to transparent, but you’d want it to do from transparent to another color also? As I’m understanding, that seems to be the case.

[Erik_J]

Hi franciscobrito, Welcome to the forums!

You could try the sticky position:

position: sticky; | CSS-Tricks

Maybe apply a background color or something to make it readable when on top of content.

[franciscobrito]

Thanks for the reply. I want it to start transparent on the top of the page as it is right now but then to turn black when I scroll down.

[franciscobrito]

Thank you for the reply this forum looks great and helpful. Right now the sticky position is not the problem. I could set it as sticky in the Theme Options and I know I can always do it with the code “position: sticky”, my problem is that I want it to turn black when I Scroll down and until now I was not able to do it.

[PaulOB]

You should be able to add the background using the class added by js when it scrolls.

e.g.

.sticky-nav-area.houzez-in-view{
background:#000;
}