Fullpage.js与背景色褪色

Question

嗨我试图让2插件工作，以便您滚动时有一个“幻灯片”从一个整页容器转移到另一个与背景颜色淡入淡出过渡。

插件

魔术滚动彩色 http://codepen.io/daveredfern/pen/zBGBJV

Fullpage.js http://alvarotrigo.com/fullPage/

然而， '神奇的滚动颜色' 似乎没有工作，如果我包含所有的“ .panel“divs以外的任何其他标签/ div - 问题是我需要一个容器div订购fullpage.js工作。

即使我改变背景颜色JS来定位div容器名称 （即）

$body = $('#fullpage') or $body = $('fullpage') 

...它仍然无法工作。我发现很难相信它不适用于变量div和body标签之间的任何东西。 我在这里嘲笑了这个问题的一个例子：https://codepen.io/anon/pen/qmbmMm

如果您能提供任何帮助，我将不胜感激！

干杯

Answer 1

的问题是，你有

#fullpage { 
    background: #f4f4f4; 
} 

和

.color-indigo { 
    background-color: #4332CF; 
} 

在CSS中的ID具有比类更高的优先级，所以它总是覆盖自定义颜色。简单的办法，除非你使用fullPage.js选项scrollBar:true或autoScrolling:false在the fullPage.js FAQs详细的类改为

#fullpage.color-indigo { 
    background-color: #4332CF; 
} 

Answer 2

的scroll的事件将不会fullPage.js被解雇。

因此，您需要滚动条才能注册Magic Sc​​rolling Color正在使用的scroll事件。

如果你不想使用滚动条，只想重新创建淡化效果，我会鼓励你去fullPage.js Fading Effect extension。