CSS parallax header and sticky navigation mutually exclusive?

问题

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.

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!

The CSS rule:

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

Breaks the ability to use Javascript/jQuery scroll events

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

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

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.

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.

Open to any suggestions.

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 :)

回答1:

Updated:

Change it from:

header::before {
    position: absolute;
}

to:

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

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

来源：https://stackoverflow.com/questions/45264029/css-parallax-header-and-sticky-navigation-mutually-exclusive

标签

javascript

html

css

scroll

parallax