Javascript 在水平视差网站上将导航栏转换为固定标题

标题可能看起来有点奇怪，但我会尽可能地解释清楚，以尽量减少混淆

目前，我在我的网站上使用FullPage.js插件来创建水平“幻灯片”效果。查看当前的网站，了解我的意思

正如你所看到的，导航栏在页面的中间是砰砰的，当你进入一切旋转的地方。当我使用箭头向右滑动时，我希望导航栏“推”出去，使Ethos链接位于左上角，隐私政策链接位于该链接旁边（水平），然后是治疗路径。然后徽标将直接向上移动，形成导航栏的中间部分。新西兰天主教会将在徽标附近向右和向上摆动，联系我们将稍微向右移动，关于页面将到达导航栏的最右侧，导航栏将全部位于页面顶部。这实质上是创建一个标题导航栏

请参阅插图了解更好的想法：

黑线是变换的路径。然而，这并不像看上去那么容易，我也可以用CSS3转换来实现这一点

现在我的问题是，我能够使用CSS，但我缺乏Jquery和Javascript知识。我不确定如何处理这个问题。这是因为我只希望在从主页单击到下一页或其他包含更多内容的页面时发生此转换。它将基本上变成一个固定的标题。然而，当我回到主页，它将需要动画回到原来的导航栏

你会怎么做？这是我的IT老师让我在假期里做的一项任务，我正在努力想如何合乎逻辑地做到这一点

---

如果我错过了什么，或者你仍然对我想要实现的目标感到困惑，请随意评论，我会尝试澄清。对于mods来说，这是一个主观的话题，我同意-但这是一个传播创造力的话题，不应该皱眉，也不应该闭嘴-IMO…

你应该使用callbacks fullPage.js提供的，如或

如果您根本不想处理javascript，请注意fullPage.js是如何更新

body

元素中的类

fp viewing xxxx

根据活动类的不同，可以使用它来激发动画

• 加载站点时，它将为空
• 转到第二张幻灯片将在您的案例中添加类

  fp-viewing-horizontal-1

• 再次回到家中现在将加载

  fp查看水平

在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
}