fullPage.js onLeave 事件触发器

Question

我试图在 fullPage.js 应用程序上切换部分时触发两个 CSS 事件。请查看我目前所在位置的 fiddle： http://jsfiddle.net/pingo_/67oe1jvn/2/

我想做以下两件事：

当我离开页面时，将 fa-stack 图标的 class 更改为悬停下的属性（目前颜色仅在 click/hover 上发生变化，但我希望它在只使用卷轴）
当背景颜色为#004e7b时，将导航节点的颜色更改为#ffffff（目前看不到第2节和第4节中的节点）

实现此目标的最佳方法是什么？我在 javascript 突破的底部有一些代码，当我离开第一部分时试图触发一条消息。这实际上完全打乱了滚动并一直跳到最后一节：

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;
    }
  }
});

我会做类似的事情来触发 fa-nav 部分的 class 更改吗？我没有在 css 中写任何东西，因为我不确定是否应该在 javascript 中或两者中完成。我之前没有注入 class 属性，并且在这两个方面遇到了很多困难。请告知最佳方法，看看您是否能够提供帮助。谢谢！！

Answer 1

您正在处理一年前提供的答案...现在 onLeave 事件有 3 个参数而不是两个，如您所见 here in the documentation.

onLeave: function(index, nextIndex, direction){

关于您的问题，要更改 class 您需要 javascript。但也许这不是你需要的。

查看 this video。

记住 fullPage.js 将 class active 添加到活动部分，并在 body 元素中添加 class fp-viewing-xxx其中 xxx 是当前部分的 anchor 名称或其索引（如果未提供锚点）。

这样你就可以玩 css:

#demo{
    color: red;
} 

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

fullPage.js onLeave 事件触发器

fullPage.js onLeave event triggers

css

jquery

fullpage.js