CSS 视差标题和粘性导航互斥? [英] CSS parallax header and sticky navigation mutually exclusive?

问题描述

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

I'm working on a new HTML5 CSS3 template which features a parallax scrolling header, as well as sticky navigation menu and a scroll to top link.

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

I've gotten the elements working individually, however, there are a few CSS rules for the parallax header which are breaking the sticky navigation and scroll link, and it's doing my head in!

CSS 规则:

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

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

Breaks the ability to use Javascript/jQuery scroll events

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

从不触发事件，但注释掉 CSS 规则，它就起作用了.

Never fires the event, but commenting out the CSS rules and it works.

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

Secondly, the parallax effect requires the CSS perspective rules set, and these seem to break position:fixed

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

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

These rules prevent any element from being position:fixed, such as the sticky navigation and the scroll to top link.

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

I'm looking for solutions which allow for all three elements to work together. I'd rather try and avoid doing the parallax in jQuery changing the background-position property, but if that is the only way then that's what I'll have to do.

欢迎任何建议.

我有一个关于 CodePen 的工作示例 - https://codepen.io/timtrott/pen/vZVOwq

I've a working example on CodePen to play with - https://codepen.io/timtrott/pen/vZVOwq

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

I've left the rules commented out so you can see how the sticky nav and scroll to top links work. Uncomment the rules and the header work nicely, but not the navigation or link.

预先感谢您的任何建议:)

Thanks in advance for any suggestions :)

推荐答案

更新:

将其更改为:

header::before {
    position: absolute;
}

到:

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

-moz 适用于 Mozilla；-webkit 适用于 Chrome.希望它应该有效.

-moz is for Mozilla; -webkit is for Chrome. Hope it should work.

这篇关于CSS 视差标题和粘性导航互斥?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！