Change navbar background color on scroll

[throwawayaccount]

Hello Everyone,

I’m a few days into starting with Wappler and I am starting to realize how powerful Wappler is. The hardest part so far is picking up all the intricacies of the tool.

I am building a static website, with a navbar that currently has a transparent background. What I’m looking to do is set a condition so that when the user scrolls away from the topmost setting the background color changes to a white background. I haven’t been able to find much documentation wise on Wappler or community forums here. But if anyone has any guidance it would be very much appreciated!

I also came across this on stack overflow:

Changing nav-bar color after scrolling?

I haven’t been able to figure out how to implement this yet.

[TomD]

This can be done by adding the Browser component to your page and then adding a dynamic attribute - Class Toggle - to the navbar, eg:
dmx-class:bg-danger=“browser1.scrollY.offset > 10”

This would make the navbar turn red after scrolling 10 pixels (using default Bootstrap theme).

[throwawayaccount]

@TomD

That worked perfectly and was so easy. Thanks for the quick response!

[TomD]

I’m glad that helped.

It’s not always obvious what can be done with the various components - and to document all the possibilities would be impossible. In the case of the Browser component, there is a thread here with examples of the many values it can return - which, in turn, might help you consider possible uses.

[throwawayaccount]

Ya, I’m seeing that. It’s those little things that you just have to learn along the way. But it’s nice to have a community here to help people like me out it makes a huge difference!