Is it possible to change the background color when a user scrolls <section>s?

Question

I'm putting together this site, site i'm building

The site on desktop is working properly but when I try it on mobile it does not like the snap scroll plugin that I used. So I found this other one. One page scroll demo .

The problem is that the one page scroll jQuery uses sections that are technically scrolling on top of the page. So this breaks my fade in asset and gradient background. They are technically below the fold and scroll up. The gradient background changes based on the position on a 2000px height page.

tl:dr; Is it possible to change a background color based on the content that is scrolled on a single page instead of the page itself scrolling? I've been thinking that maybe theres a way by having a scrolling div behind the content?

Answer 1

Whatever it is that triggers the movement you could also have trigger a styling change. But I doubt that'd look good.

What you probably want to do is put each section in its own div, and give each div its own color.

Answer 2

You can consider using fullPage.js instead.

It provides the option scrollBar:true (among many others) so your animations will keep working as expected.

Demo here .