fullPage.js onLeave事件触发器 [英] fullPage.js onLeave event triggers

问题描述

我尝试在fullPage.js应用程式切换部分时触发两个CSS事件。请看我目前在这里的一个小提琴：
http://jsfiddle.net / pingo_ / 67oe1jvn / 2 /

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/

我想做以下两件事：

• 当我离开页面时，将ho-stack图标的类更改为悬停下的属性（目前颜色只是在点击/悬停时更改，但是如果只使用滚动）


• 当背景颜色为＃004e7b时，将导航节点的颜色更改为#ffffff（目前无法查看第2节和第4节中的节点）

这是最好的方法是什么？我在javascript突破的底部有一些代码，当我离开第一部分时尝试触发消息。这实际上完全弄乱了滚动，并跳过一直到最后一部分：

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

我会做类似的事情来触发fa-nav部分的类更改吗？我没有在css中写任何东西，我不知道是否应该在那里，在javascript中，或在两者。我没有注入类属性之前，我有很多困难与这两个。请指出最好的方法，看看你能否帮助。谢谢!!

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 !!

推荐答案

您正在一年前提供的答案...现在 onLeave event有3个参数intead两个，你可以看到

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）{

onLeave: function(index, nextIndex, direction){

关于您的问题，要更改课程，您需要javascript。

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

查看此视频。

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

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.

这种方式你可以使用css：

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

这篇关于fullPage.js onLeave事件触发器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！