CSS 视差标头和粘性导航相互排斥?

Question

我正在开发一个新的HTML5 CSS3模板，该模板具有视差滚动标题，粘性导航菜单和滚动到顶部链接。

我已经让元素单独工作，但是，视差标题有一些 CSS 规则会破坏粘性导航和滚动链接，它正在做我的头！

CSS 规则：

html {
height: 100%;
overflow: hidden;
}

中断了使用 Javascript/jQuery 滚动事件的能力

$(window).scroll(function() {
alert("Hello!");
});

从不触发事件，但注释掉 CSS 规则就可以了。

其次，视差效果需要设置CSS透视规则，这些似乎打破了位置：固定

body {
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

这些规则可防止任何元素的位置：固定，例如粘性导航和滚动到顶部链接。

我正在寻找允许所有三个元素协同工作的解决方案。我宁愿尝试避免在 jQuery 中更改背景位置属性的视差，但如果这是唯一的方法，那么这就是我必须做的。

欢迎任何建议。

我有一个关于 CodePen 的工作示例可以使用 - https://codepen.io/timtrott/pen/vZVOwq

我已注释掉规则，以便您可以看到粘性导航并滚动到顶部链接的工作原理。取消注释规则和标题工作得很好，但导航或链接不能。

提前感谢您的任何建议:)

Answer 1

更新：

将其从：

header::before {
position: absolute;
}

自：

header::before {
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}

-moz 代表 Mozilla; -webkit 适用于 Chrome。 希望它应该有效。