HTML & CSS Transparent Sticky Nav Bar that changes color on Scroll

[francisco_brito94]

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 Them 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.

 

[Mutiny]

I would recommend you look into Waypoints JS. I've used this library before for detecting when a user scrolls. Basically, you can set a waypoint and at that point add or remove classes from your navigation bar.

Your navigation bar is pretty big, so you could use some CSS to change the color as well as slim it down once the user has scrolled some. Usually you don't want the nav bar to be more than 50px tall in the scroll state. Also, keep in mind that with a sticky nav bar named anchors (eg links with the # symbol at the end) don't work so well as the nav bar will likely cover them up. It's a common problem that I run into on sites that use these sticky nav bars.

 

[francisco_brito94]

I would recommend you look into Waypoints JS. I've used this library before for detecting when a user scrolls. Basically, you can set a waypoint and at that point add or remove classes from your navigation bar.

Your navigation bar is pretty big, so you could use some CSS to change the color as well as slim it down once the user has scrolled some. Usually you don't want the nav bar to be more than 50px tall in the scroll state. Also, keep in mind that with a sticky nav bar named anchors (eg links with the # symbol at the end) don't work so well as the nav bar will likely cover them up. It's a common problem that I run into on sites that use these sticky nav bars.

Thanks a lot for your helpful reply!