El encabezado CSS parallax y la navegación adhesiva son mutuamente exclusivas.

Estoy trabajando en una nueva plantilla CSS3 de HTML5 que cuenta con un encabezado de desplazamiento de paralaje, así como un menú de navegación adhesivo y un enlace hacia arriba.

He conseguido que los elementos funcionen individualmente, sin embargo, hay algunas reglas de CSS para el encabezado de paralaje que están rompiendo la navegación adhesiva y el enlace de desplazamiento, ¡y me está metiendo de cabeza!

La regla de CSS:

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

Rompe la capacidad de usar eventos de desplazamiento Javascript / jQuery

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

Nunca dispara el evento, pero comenta las reglas de CSS y funciona.

En segundo lugar, el efecto de paralaje requiere las reglas de perspectiva CSS establecidas, y estas parecen romper la posición: fijo

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

Estas reglas impiden que cualquier elemento sea posicionado: fijo, como la navegación adhesiva y el enlace hacia arriba.

Estoy buscando soluciones que permitan que los tres elementos trabajen juntos. Prefiero tratar de evitar hacer el paralaje en jQuery cambiando la propiedad de posición de fondo, pero si esa es la única forma, entonces eso es lo que tendré que hacer.

Abierto a cualquier sugerencia.

Tengo un ejemplo práctico en CodePen para jugar – https://codepen.io/timtrott/pen/vZVOwq

Dejé las reglas comentadas para que puedas ver cómo funcionan el navegador adhesivo y los enlaces de desplazamiento hacia arriba. Descomente las reglas y el encabezado funcionan bien, pero no la navegación o el enlace.

Gracias de antemano por cualquier sugerencia 🙂

Actualizado:

Cambiar desde:

 header::before { position: absolute; } 

a:

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

-moz es para Mozilla; -webkit es para Chrome. Espero que funcione.