I am struggling to implement two CSS events when transitioning between sections on a fullPage.js application. To see my current progress, you can view the following fiddle: http://jsfiddle.net/pingo_/67oe1jvn/2/
My objectives are as follows:
- To modify the class of the fa-stack icons to attributes upon leaving the page (currently the color changes only on click or hover, but I want it to change with scrolling)
- To adjust the color of the navigation nodes to #ffffff when the background color is #004e7b (at present, the nodes are not visible in sections 2 and 4)
What would be the most effective way to accomplish this? In the JavaScript code snippet below, I have attempted to trigger an alert message upon leaving section one. However, this causes issues with scrolling and jumps directly 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;
}
}
});
Similarly, how could I implement a change of class for the fa-nav sections? I'm unsure whether this change should be made in the CSS, JavaScript, or both. Working with class attributes is new to me, and I'm encountering difficulties with these tasks. Any guidance on the best approach and assistance would be greatly appreciated. Thank you!