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!

Answer

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

    $('#fullpage').fullpage({
        anchors: ['home', 'work', 'contact'],
        onLeave: function(index, nextIndex, direction){
            if(nextIndex === 1) {
                  $('body').removeClass('foo');
            } else {
                  $('body').addClass('foo');
            }
        }
    });

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

Advise: instead of:

    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['home', 'work', 'contact'],
            });
        });
    </script>
    <script src="js/formvalidation.js"></script>
    <script src="http://use.typekit.net/mye6dqa.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>
    <script>
    required.add('Full_Name','NOT_EMPTY','Full Name');
    required.add('Email_Address','EMAIL','Email Address');
    required.add('Your_Message','NOT_EMPTY','Your Message');
    </script>
    <script>
            function getURLParameter(name) {
              return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/+/g, '%20'))||null
            } 
            var succesvar = getURLParameter("succesful");
    </script>

You can do:

    <script src="js/formvalidation.js"></script>
    <script src="http://use.typekit.net/mye6dqa.js"></script>
    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['home', 'work', 'contact'],
            });
        });
        try{Typekit.load();}catch(e){}
        required.add('Full_Name','NOT_EMPTY','Full Name');
        required.add('Email_Address','EMAIL','Email Address');
        required.add('Your_Message','NOT_EMPTY','Your Message');
        function getURLParameter(name) {
              return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/+/g, '%20'))||null
            } 
            var succesvar = getURLParameter("succesful");
    </script>

Or with another file:

    <script src="js/formvalidation.js"></script>
    <script src="http://use.typekit.net/mye6dqa.js"></script>
    <script src="js/main.js"></script>

With js/main.js:

        $(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['home', 'work', 'contact'],
            });
        });
        try{Typekit.load();}catch(e){}</script>
        required.add('Full_Name','NOT_EMPTY','Full Name');
        required.add('Email_Address','EMAIL','Email Address');
        required.add('Your_Message','NOT_EMPTY','Your Message');
        function getURLParameter(name) {
              return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/+/g, '%20'))||null
            } 
            var succesvar = getURLParameter("succesful");