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

Question

标题可能看起来有点奇怪，但我会尽可能地尝试解释，以便最大限度地减少混淆。

目前我在我的网站上使用FullPage.js插件来创建一个水平的幻灯片＆＃39;影响。目前检查网站，看看我的意思。 http://carrotcrunchpvp.comule.com/

正如您所看到的那样，当您输入旋转所有内容的位置时，导航栏会在页面中间发出砰砰声。当我使用箭头向右滑动时，我希望导航栏能够“推动”＃39;因此，Ethos链接位于左上角，隐私策略链接与此相邻（水平），然后是愈合路径。然后徽标将直接向上移动以形成导航栏的中间。新西兰天主教堂将在右侧和右边的徽标旁边摆动，联系我们将稍微向右走，并且about页面将到达导航栏的最右侧，该导航栏将全部位于页面顶部。这基本上是创建标题导航栏

查看插图以获得更好的想法：

黑线是转换的路径。然而，它并不像看起来那么容易，我也可以用CSS3转换做到这一点......

现在我的问题，我有能力使用CSS，但我的Jquery和Javascript知识缺乏。我不确定如何处理这个问题。这是因为我只想将此转换为从主页点击到下一页或其他具有更多内容的页面。它本质上将变成一个固定的标题。然而，当我回到主页时，它需要向后动画到原始导航栏...

你会怎么做？这是我的I.T老师让我在假期做的一项任务，我正在努力想出如何逻辑地做这件事。

如果我错过了任何内容，或者您​​仍然对我想要达到的目标感到困惑，请随时发表评论，我会尽力澄清。对于mods来说，这是一个主观话题，我同意 - 但它是一个传播创造力的主题，不应该被束缚并且关注并关闭 - IMO ...

Answer 1

您应该使用callPages fullPage.js提供的内容，例如afterSlideLoad或afterSlideLeave。

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

您可以根据活动类使用它来触发动画。

• 加载网站时，它将为空。
• 转到第二张幻灯片会在您的案例中添加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
}