javascript - CSS视差标题和粘性导航相互排斥？

Question

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

我已经让这些元素单独工作了，但是，视差标题有一些 CSS 规则打破了粘性导航和滚动链接，这让我头疼!

CSS 规则:

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

打破了使用 Javascript/jQuery 滚动事件的能力

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

从不触发事件，但注释掉 CSS 规则并且它有效。

其次，视差效果需要CSS透视规则集，而这些似乎打破了position:fixed

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

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

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

接受任何建议。

我在 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。希望它能奏效。