Change background of navbar on scroll

Hi!

Is it possible in Frontity to change the backgroudn color of an element on scroll? Like they do it here:

Hi @kasper

Yes, that is entirely possible. TBH it’s not really a Frontity question, it’s more generally a JS & CSS thing and there are plenty of tutorials online that explain how to change an element depending on scroll position - here’s one and here’s another.

As indicated in the first article one possible way is to use the Intersection Observer.

Bear in mind that Frontity is an isomorphic React app, i.e. one in which the same code base runs on both the server and the client, and that checking for scroll position may rely on the window object which doesn’t exist on the server (i.e. in SSR). Therefore ensure that your scroll position checking code is only running in the client.

Hope this helps.

1 Like

Just to add more info here, Frontity offers a hook called useInView that simplifies adding an Intersection Observer behaviour to a Frontity project