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

Question

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

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

正如您所见，当您输入所有旋转的位置等时，导航栏在页面中间会发出砰砰声。当我使用箭头向右滑动时，我希望导航栏“推出”，因此 Ethos 链接转到左上角，隐私政策链接与此相邻（水平），然后是治疗路径。然后徽标将直接向上移动以形成导航栏的中间。 NZ catholic Church 将在徽标附近向右上方摆动，联系我们将稍微向右移动，关于页面将到达导航栏的最右侧，该导航栏将全部位于页面顶部。这实际上是创建一个标题导航栏

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

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

现在我的问题是，我可以使用 CSS，但是我的 Jquery 和 Javascript 知识还不够。我不确定如何解决这个问题。这是因为我只希望这种转换在从主页点击到下一页或具有更多内容的其他页面之一时发生。它本质上将变成一个固定的标题。但是，当我返回主页时，它需要动画回到原来的导航栏...

你会怎么做呢？这是我的 I.T 老师让我在假期完成的任务，我正在努力弄清楚如何在逻辑上做到这一点。

如果我遗漏了什么，或者您仍然对我想要实现的目标感到困惑，请随时发表评论，我会尽力澄清。对模组来说，这是一个主观的话题，我同意 - 但这是一个传播创造力的话题，不应该被皱眉并看着结束 - 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
}