Skip to content
Advertisement

Add class when on second onepage-page

I am building a website (one page) and when you scroll down, the second page scrolls over the first page. The background-color of the second page is a little bit transparant (0.9) so you can still see the first page.

I want the div with text on the first page and the logo to have an extra class when the second page is scrolled over the first page so I can make the text and logo disappear.

I tried to use jQuery’s inview function, but due to an absolute position, the first page isn’t really out of the viewport.

If someone could help me, thanks!

Advertisement

Answer

I found an onLeave event in the doc that receive a nextIndex value:

JavaScript

This will add the foo class on page 2, 3, … and remove it on first page.

Advise: instead of:

JavaScript

You can do:

JavaScript

Or with another file:

JavaScript

With js/main.js:

JavaScript
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement