fullPage.js onLeave event triggers

问题

I am attempting to trigger two CSS events when switching sections on a fullPage.js app. Please see a fiddle of where I'm currently at here: http://jsfiddle.net/pingo_/67oe1jvn/2/

I would like to do the following two things:

Change the class of the fa-stack icons to attributes under hover when I leave the page (currently the color is only changing on click/hover, but I would like it to change if the use just scrolls)
Change the color of the navigation nodes to #ffffff when the background color is #004e7b (currently cannot see the nodes in sections 2 and 4)

What is the best way to achieve this? I have some code at the bottom of the javascript breakout that attempts to trigger a message when I leave section one. This actually messes up the scrolling completely and skips all the way to the last section:

var fromSection1 = false;
$('#fullpage').fullpage({       
  onLeave: function(index, direction){
     var leavingSection = $(this);
    //after leaving section 2
    if(index == 1 && direction =='down'){
      alert("Going to section 2!");
    }else{
      fromSection1 = false;
    }
  }
});

And would I do something similar to trigger a change of class for the fa-nav sections? I have not written anything in the css, bc I am not sure if it should be done there, in the javascript, or in both. I have not injected class attributes before and am having a lot of difficulty with these two. Please advise the best approach and see if you are able to help. Thanks !!

回答1:

You are working in an answer provided one year ago... Now the onLeave event has 3 parameters intead of two as you can see here in the documentation.

onLeave: function(index, nextIndex, direction){

Regarding your questions, to change a class you need javascript. But maybe that's not what you need.

Check out this video.

Remember fullPage.js adds the class active to the active section, and in the body element it adds the class fp-viewing-xxx where xxx is the anchor name of the current section or its index if no anchors are provided.

This way you can play with css:

#demo{
    color: red;
} 

/* applied only on the section with the anchor `firstpage` */     
body.fp-viewing-firstpage #demo{
    color: blue;
}

来源：https://stackoverflow.com/questions/31461952/fullpage-js-onleave-event-triggers

标签

jquery

css

fullpage.js