javascript - Scrollmagic .to() 不适用于 Wordpress 中的整页

Question

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

当用户向下滚动到或单击“Studios”导航链接时，某些元素将更改背景颜色(其中大多数已经可以使用)。我特别尝试更改“工具提示”的背景颜色。如果您将鼠标悬停在左侧(当前有 5 个)或顶部(当前工作室部分有 2 个)的导航点上，则会出现这些框。每个工具提示都有“背景”类。

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

这里是链接和相关代码。

Link to live example

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

//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. 全页插件有一个默认的颜色设置(现在是紫色)，并且以某种方式阻止任何更改。它包含的CSS是一个ID为“wpfp-dynamic-css”的样式标签
2. .to() 不是在补间中使用的正确操作。这是我第一次使用 Scrollmagic，所以我正在不断学习。

我想看看是否有其他方法可以成功更改工具提示颜色，我做到了。您会注意到，在我包含的代码块中，我有一个名为 tooltipStudios() 的函数。如果我在补间中使用此函数作为 call() ，它将成功更改颜色(如果您转到 Agency 部分，您可以看到一个示例。它将把工具提示 bg 更改为 #000000)。但是，如果您向上滚动到任何部分，就像我使用 .to() 时其他元素的颜色所做的那样，颜色不会变回去。

我现在完全被难住了。以下是您可能需要的一些相关插件/脚本的快速列表:

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

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

预先感谢任何愿意解决此问题的人!

Answer 1

如果您阅读fullPage.js FAQs您将在以下问题中找到答案:

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

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.