CSS视差标题和粘性导航互斥？

Posted 2023-03-31

【中文标题】CSS视差标题和粘性导航互斥？

【英文标题】：CSS parallax header and sticky navigation mutually exclusive?

【发布时间】：2017-07-23 10:25:49

【问题描述】：

我正在开发一个新的 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

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

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

【参考方案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。 希望它应该工作。

【讨论】：

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