CODEWITHSUNDEEP
javascriptjqueryhtmlscrollfullpage.js
Nicolás Muiño
Nicolás Muiño

Reputation: 79

Add or remove css class after scrolling on fixed element while using fullpage.js

Im using fullpage.js to build a fixed-scroll page. Here is the rough example > https://pages.devex.com/Fixed-Scroll-Test.html

I want to add an extra class to "logo" (fixed on the top left) after I scroll into the second section, let say to be color:white.

I want to achieve this because I will use black and white backgrounds and I want to have good contrast in the nav elements.

I'm using something like this but I doesn't work, maybe its interfering with fullpage.js?

        if ( $('body').scrollTop() > $('#section1').position.top ) {
            $('.devexlogo').addClass('white');
        }

Upvotes: 2

Views: 1802

Answers (3)

Nicolás Muiño
Nicolás Muiño

Reputation: 79

Thank you all for you answers.

Luckily, fullpage.js asigns a special class to the active section. Something like fp-viewing-sectionname

So I ended up usign that to specify special css rules to the elements I needed to change.

This ref helped a lot: https://www.youtube.com/watch?v=qiCVPpI9l3M

Upvotes: 1

Bradley4
Bradley4

Reputation: 500

It looks like fullpage.js messes with the way jQuery gets the scrollTop() for the window, but fullpage.js actually has something built-in that will help you with this. Add the onLeave part to your code 

    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage'],
            sectionsColor: ['#999999', '#F1F1F1', '#7E8F7C'],
            navigation: true,
            navigationPosition: 'right',
            navigationTooltips: ['First page', 'Second page', 'Third and last page'],
            responsiveWidth: 900,
            onLeave: function(index, nextIndex, direction){
                if (nextIndex != 1){
                    $('.devexlogo').addClass('white');
                } else {
                    $('.devexlogo').removeClass('white');
                }
            }
        });
    });

As a side note, your code had an error anyway, you were missing a (). It would have been

$('#section1').position().top

Upvotes: 1

abhi
abhi

Reputation: 139

The code snippet you've got only loads once (which will result in not adding the class).

You want something like this:

$("#fullpage").scroll(function(){
  //your code here
});

Make sure the container you call this function on has the overflow: scroll CSS property attached to it! See more here: https://api.jquery.com/scroll/

Upvotes: -1

Related Questions