jquery - fullPage.js onLeave 事件触发器

Question

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

我想做以下两件事:

• 当我离开页面时，将 fa-stack 图标的类更改为悬停下的属性(目前颜色仅在单击/悬停时发生变化，但如果使用只是滚动，我希望它发生变化)
• 当背景颜色为#004e7b时，将导航节点的颜色更改为#ffffff(目前看不到第2节和第4节中的节点)

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

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 部分的类更改吗？我没有在 css 中写任何东西，因为我不确定它是否应该在那里、在 javascript 中或在两者中完成。我以前没有注入(inject)过类属性，这两个我遇到了很多困难。请告知最佳方法，看看您是否能够提供帮助。谢谢!!

Answer 1

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

onLeave: function(index, nextIndex, direction){

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

查看 this video .

请记住，fullPage.js 将类 active 添加到事件部分，并在 body 元素中添加类 fp-viewing-xxx 其中 xxx 是当前部分的 anchor 名称或其索引(如果未提供 anchor )。

这样你就可以玩css了:

#demo{
    color: red;
} 

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