Change Header Bar style on scroll

[gezquinn]

Hello,

Newbie here - setting up a website (gezquinn.com). Wanting to change a sticky header so that it inverts and becomes black on white on scroll and returns to it’s default style of white on transparent if the user returns to the top of the page - how do i achieve this please?

Thanks

Gez

[christian]

Hey Gez,

For this setup, you will need to use 2 bars.

The first bar should be static and transparent

The second bar needs to be sticky enabled and initially hidden.

Here’s a screencast showing the setup (pause & play to follow along).

Hope that helps.

[gezquinn]

Hi, Thanks for the reply. I was looking for something more elegant than that solution. Something CSS or JS based that doesn’t involve making a copy of the bar. The problem with this solution is that the bar descends from the top as you scroll which makes it look obvious that it’s another bar. Is there anyway to make it seem like it’s the same bar but just changing styling?

[christian]

Here’s a screencast using CSS. Please note that using CSS is not the official way of achieving this and is considered customization which is outside the scope of our support. For issues and enhancements, you will need to hire a third party developer.

Thanks.

[gezquinn]

Thanks for that. Very much appreciated.

[ruenel]

You are most welcome!