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。 希望它能起作用。