CODEWITHSUNDEEP
jqueryscrollfullpage.js
Erez
Erez

Reputation: 33

Add/remove class with jquery based on vertical scroll combined with fullPage.js?

I'm trying to add/remove CSS classes (e.g. "clearHeader" and "darkHeader") with jQuery based on vertical scroll. That itself is very easy and works well, but when I try to combine that with fullPage.js (see http://alvarotrigo.com/fullPage) - it doesn't work.

Script used:

//<![CDATA[ 
    $(function() {
        var header = $("#fullpage");
        $(window).scroll(function() {    
            var scroll = $(window).scrollTop();

            if (scroll >= 500) {
                header.removeClass('clearHeader').addClass("darkHeader");
            } else {
                header.removeClass("darkHeader").addClass('clearHeader');
            }
        });
    });        
//]]>

See jsfiddles:

Anyone had this issue before or knows of a workaround script that considers this type of irregular scrolling? (basically fullPage "toggles" between full-page sections accessible by pressing the down/up key or by a single mouse scroll).

Upvotes: 0

Views: 1524

Answers (1)

Alvaro
Alvaro

Reputation: 41595

If you read the fullPage.js FAQs you will see this:

jQuery scroll event doesn't work.
Same answer as Parallax doesn't work with fullpage.js

Which is:

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

There you have it. If there's no scroll bar, then you will jump from section to section so in your case, the most logical thing to do would be to use the callbacks provided by fullPage.js such as afterLoad, onLeave, afterSlideLoad or onSlideLeave.

Or, if you want to deal only with css, fullPage.js adds a class to the body depending on the section/slide the page currently is.

You could easily do something like:

body.fp-viewing-secondPage .demo{
   display:none;
}
body.fp-viewing-thirdPage .demo{
    display:block
}

Upvotes: 2

Related Questions