CSS视差头和粘导航相互排斥？(CSS parallax header and sticky nav

2019-09-29 22:56发布

我正在那里设有一个视差滚动头，以及粘导航菜单和滚动到顶部链接一个新的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浏览器。希望它应该工作。

文章来源: CSS parallax header and sticky navigation mutually exclusive?

Answer 1: