Javascript CSS视差标题和粘性导航是否相互排斥？

我正在开发一个新的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中更改背景位置属性时使用视差，但如果这是唯一的方法，那么这就是我必须要做的

欢迎任何建议

我有一个代码笔的工作示例可以使用-

我已经把规则注释掉了，这样你就可以看到粘性导航和滚动到顶部链接是如何工作的。取消注释规则和标题可以很好地工作，但导航或链接不行

提前感谢您的建议：

更新：

更改为：

header::before {
    position: absolute;
}

致：

-moz代表Mozilla； -webkit是用于Chrome的。

---

希望它能起作用。

谢谢你的回复，但我看不出这有什么不同，至少在Firefox或Chrome上没有

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