Clever Geek Handbook

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

I am collecting this site, the site I am building

The desktop site works correctly, but when I try it on mobile it doesn't like the snap scroll plugin I used. So I found this one different. Scroll one page .

The problem is that jQuery single page scrolling uses sections that technically scroll on top of the page. So this breaks my fade in assets and gradients background. They are technically below the folds and scroll up. The background of the gradient changes depending on the position on the page with a height of 2000 pixels.

TL: dr; Is it possible to change the background color based on content that scrolls on one page rather than the page itself? I thought that maybe this is the way when you have a scrollable div?

+3


source to share


2 answers


Whatever is causing the movement, you can also cause a style change. But I doubt everything will be okay.



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

+1


source


You can use fullPage.js instead .

It provides an option scrollBar:true

(among many others) so your animations will work as expected.



Demo is here .

+1


source






More articles:


All Articles