Scrollmagic .to（）无法在Wordpress中使用Fullpage

Question

我在使用Scrollmagic更改元素（“。background”）的背景颜色时遇到问题。 我已经成功地改变了其他元素的背景颜色，但这个特定的背景颜色已经打败了我。 这是场景：

当用户向下滚动或点击“工作室”导航链接时，一些元素将改变背景颜色（其中大部分已经工作）。 我特意试图改变“工具提示”的背景颜色。 如果您将鼠标悬停在左侧的导航点（当前有5个）或顶部（当前工作室部分为2个）上，则显示这些框。 这些工具提示中的每一个都具有“背景”类。

当您首次加载页面并将鼠标悬停在左侧的顶部点上时，您应该会在紫色框中弹出“远征”。 当您向下滚动到工作室时，它应该将此框和其他类似的工具更改为红色框。 它没有。

这是一个链接和相关代码。

链接到实例

警告这是一项正在进行的工作。 忽略许多其他事情不起作用的事实。 这肯定不适用于移动或小宽度设备。

//Studios
var redBG = '#7d1217';
var redLight = '#7d3537';
var redNav = '#fc1925';
function tooltipStudios() {
    jQuery(".backdrop").css({"backgroundColor" : redBG})
}

//Create Studios Timeline
var studiosColor = new TimelineMax()
    .to('#site-header-menu', 0.3, {backgroundColor: redLight})
    .to('#wpfp-navmenu', 0.15, {backgroundColor: redBG})
    .to('#fp-nav ul li a span', 0.3, {backgroundColor: redNav})
    .to('#secnav-studios span', 0.15, {backgroundColor: redLight})
    .to('.dropdown-content li', 0.05, {backgroundColor: redBG})
    .to('#colophon', 0.3, {backgroundColor: redBG})
    .to('.background', 0.15, {backgroundColor: redBG});

// Studio Scene
var studiosScene = new ScrollMagic.Scene({
    triggerElement: '#slide-studios',
    offset: 200
})
.setTween(studiosColor)
.addTo(controller);

我一直试图缩小阻止它触发的范围，到目前为止我能想到的是：

1. Fullpage插件有一个默认的颜色设置（现在它是紫色），并以某种方式阻止任何更改。 它包含的css是ID为“wpfp-dynamic-css”的样式标记
2. .to（）不是在补间中使用的正确操作。 这是我第一次使用Scrollmagic，所以我正在学习。

我想看看是否有其他方法可以成功更改工具提示颜色，我能够。 您会注意到我在代码块中包含了一个名为tooltipStudios（）的函数。 如果我在补间中使用此函数作为call（），它将成功更改颜色（如果您转到代理部分，则可以看到一个示例。它会将工具提示bg更改为＃000000）。 但是，如果在我使用.to（）时向后滚动到任何部分（如其他元素的颜色），颜色将不会变回。

我完全被这一点困扰了。 以下是您可能需要的一些相关插件/脚本的快速列表：

• Wordpress（撰写本文时为最新版）
• WP Fullpage插件（包含fullpage.js）
• Scrollmagic（撰写本文时为最新版）

请随时询问任何其他信息/代码，我会提供。

提前感谢愿意解决这个问题的人！

Answer 1

如果您阅读fullPage.js常见问题解答，您将在以下问题中找到答案：

• jQuery scrollTop函数不起作用
• jQuery滚动事件不起作用

简短回答：对fullPage.js或autoScrolling使用scrollBar：true选项：如果您不想使用自动滚动功能，请使用false。

说明： Parallax以及依赖于网站滚动的许多其他插件，侦听javascript的scrollTop属性和scroll事件。 fullPage.js实际上并不滚动网站，但它会更改网站的top或translate3d属性。 仅当使用fullPage.js选项scrollBar：true或autoScrolling：false时，它才会以scrollTop属性可访问的方式实际滚动网站。