Scrollmagic .to（）不能在Wordpress中的Fullpage上工作

我在使用Scrollmagic更改元素（「.background」）的背景顏色時遇到問題。我已經成功地改變了其他元素的背景顏色，但是這個特定的元素已經擊敗了我。這裏是場景：Scrollmagic .to（）不能在Wordpress中的Fullpage上工作

當用戶向下滾動或點擊「工作室」導航鏈接時，某些元素將更改背景顏色（其中大部分已經工作）。我特別試圖改變「工具提示」的背景顏色。這些是如果您將鼠標懸停在左側導航點（當前有5個導航點）或頂部導航點（在Studios部分目前有2個導航點）上顯示的框。每個工具提示都有「背景」類。

當您第一次加載頁面並將鼠標懸停在左側的頂部點上時，您應該看到「Expedition」彈出一個紫色框。當您向下滾動到工作室時，應該將此框和其他類似的框更改爲紅色框。它沒有。

這是一個鏈接和相關代碼。

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

我一直在試圖縮小是什麼阻止它觸發，至今這裏是我能想到的：

的整頁顯示插件有一個默認的設置顏色（現在它是紫色的）並以某種方式防止任何變化。它包含的CSS是ID爲「wpfp-dynamic-css」的樣式標籤
.to（）不適合在補間中使用。這是我第一次使用Scrollmagic，所以我正在學習。

我想看看是否有其他方式成功更改工具提示顏色，我能夠。你會注意到我包含的代碼塊中有一個叫做tooltipStudios（）的函數。如果我將這個函數用作補間中的call（），它將成功更改顏色（如果您轉到代理部分，可以看到一個示例，它會將工具提示bg更改爲＃000000）。但是，如果您向後滾動到任何部分（如使用.to（）時其他元素的顏色），顏色將不會改回。

我完全在這一點上難住了。下面是一些相關的插件/腳本，你可能需要一個快速列表：

WordPress的（最多在寫作的時間爲準）
WP整頁顯示插件（包含fullpage.js）
Scrollmagic（寫作時最新）

請隨時索取任何其他信息/代碼，我會提供。

在此先感謝任何願意解決此問題的人！

來源

2016-05-14 Patrick H.

如果你讀fullPage.js FAQs，你會發現這個問題的答案：

jQuery的scrollTop的功能不起作用
jQuery的滾動事件不起作用

簡短回答：對於fullPage.js或autoScrolling使用scrollBar：true選項：如果您不想使用自動滾動功能，則爲false。

說明：視差，以及許多其他依賴於站點滾動的插件，監聽javascript和scroll事件的scrollTop屬性。 fullPage.js實際上並不滾動網站，但它會更改網站的頂部或translate3d屬性。僅當使用fullPage.js選項scrollBar：true或autoScrolling：false時，它實際上會以可供scrollTop屬性訪問的方式滾動網站。

來源

2016-05-17 09:50:52 Alvaro

我試着設置scrollBar：true，autoScrolling：false，off/on的每一個組合我都可以和沒有任何東西似乎工作。有什麼想法嗎？ –

沒有任何關於fullpage.js的複製或代碼很難知道，但是在任何情況下，您都應該在常見問題中詳細說明初始化'afterRender'回調中的任何外部插件。 – Alvaro

Scrollmagic .to（）不能在Wordpress中的Fullpage上工作

回答

相關問題