在水平視差網站上將導航欄轉換為固定標題

Question

標題可能看起來有點特殊，但我會盡可能地嘗試解釋，以便最大限度地減少混淆。

目前我在我的網站上使用FullPage.js插件來創建水平“幻燈片”效果。 目前檢查網站，看看我的意思。 http://carrotcrunchpvp.comule.com/

正如您所看到的那樣，當您輸入所有旋轉的位置時，導航欄會在頁面中間發出一聲砰砰聲。 當我使用箭頭向右滑動時，我希望導航欄“推出”，以便Ethos鏈接轉到左上方，隱私策略鏈接與此相鄰（水平），然后是修復的路徑。 然后徽標將直接向上移動以形成導航欄的中間。 新西蘭天主教堂將在右側和右邊的徽標旁邊擺動，聯系我們將稍微向右走，並且about頁面將到達導航欄的最右側，該導航欄將全部位於頁面頂部。 這基本上是創建標題導航欄

看看插圖以獲得更好的想法：

黑線是轉換的路徑。 然而，它並不像看起來那么容易，我也可以用CSS3轉換來做到這一點......

現在我的問題，我能用CSS，但我的Jquery和Javascript知識缺乏。 我不確定如何處理這個問題。 這是因為我只想在從主頁點擊到下一頁或其他具有更多內容的頁面時進行此轉換。 它本質上將變成一個固定的標題。 然而，當我回到主頁時，它需要向后動畫到原始導航欄...

你會怎么做？ 這是我的IT老師讓我在假期做的一項任務，我正在努力想出如何邏輯地做這件事。

如果我錯過了什么，或者你仍然對我想要實現的目標感到困惑，請隨時發表評論，我會盡力澄清。 對於mods來說，這是一個主觀話題，我同意 - 但這是一個傳播創造力的主題，不應該不贊成並且關注 - IMO ......

Answer 1

你應該使用fullPage.js提供的回調，例如afterSlideLoad或afterSlideLeave 。

如果您根本不想處理javascript，請注意fullPage.js如何更新body元素中的類fp-viewing-xxxx 。

您可以根據活動類使用它來激活動畫。

• 加載網站時，它將為空。
• 轉到第二張幻燈片將在您的情況下添加類fp-viewing-horizontal-1
• 再回到家里現在將加載fp-viewing-horizontal 。

在CSS中你可以這樣：

body .menu,
body.fp-viewing-horizontal .menu{
  //your home menu styles/animations
}

body.fp-viewing-horizontal-1 .menu,
body.fp-viewing-horizontal-2 .menu,
body.fp-viewing-horizontal-3 .menu,
body.fp-viewing-horizontal-4 .menu,
body.fp-viewing-horizontal-5 .menu,
body.fp-viewing-horizontal-6 .menu,
body.fp-viewing-horizontal-7 .menu{
  //your fixed menu styles/animations
}