‘transform3d’ no funciona con la posición: niños fijos

Tengo una situación donde, en circunstancias CSS normales, un div fijo se colocaría exactamente donde se especifica ( top:0px , left:0px ).

Esto no parece respetarse si tengo un padre que tiene una transformación translate3d. ¿No estoy viendo algo? He intentado otro webkit-transformar como estilo y transformar las opciones de origen, pero no tuve suerte.

He adjuntado un JSFiddle con un ejemplo donde esperaba que el cuadro amarillo estuviera en la esquina superior de la página en lugar de dentro del elemento contenedor.

http://jsfiddle.net/GMX5H/1/

Esta es una versión simplificada del violín:

 
Inner block

Se agradecerá cualquier sugerencia para hacer que translate2d funcione con niños de posición fija.

Esto se debe a que la transform crea un nuevo sistema de coordenadas local, según la especificación W3C :

En el espacio de nombres HTML, cualquier valor que none sea none para la transformación da como resultado la creación de un contexto de astackmiento y un bloque contenedor. El objeto actúa como un bloque contenedor para descendientes posicionados fijos.

Esto significa que el posicionamiento fijo se fija al elemento transformado, en lugar de a la ventana gráfica.

Actualmente no hay una solución alternativa que yo sepa.

También está documentado en el artículo de Eric Meyer: desvinculación de elementos fijos con transformaciones CSS .

Como Bradoergo sugirió, simplemente obtenga la ventana scrollTop y agréguela a la posición absoluta top como:

 function fix_scroll() { var s = $(window).scrollTop(); var fixedTitle = $('#fixedContainer'); fixedTitle.css('position','absolute'); fixedTitle.css('top',s + 'px'); }fix_scroll(); $(window).on('scroll',fix_scroll); 

Esto funcionó para mí de todos modos.

Tuve un parpadeo en mi navegador fijo superior cuando los elementos de la página usaban la función de transformación, lo siguiente aplicado a mi navegación superior resolvió el problema de salto / parpadeo:

 #fixedTopNav { position: fixed; top: 0; transform: translateZ(0); -webkit-transform: translateZ(0); } 

Gracias a esta respuesta en SO

En Firefox y Safari puedes usar position: sticky; en lugar de position: fixed; pero no funcionará en otros navegadores. Para eso necesitas javascript.

Asi que,

No haber encontrado un método satisfactorio para lidiar con esto; y haciendo algunos elementos del panel fuera de canvas (que requieren traducción): profundicé un poco y descubrí que (al menos para mi caso de uso) el mejor método para lidiar con esto es aplicar la misma traducción, pero romper a los niños que necesitan ser arreglado fuera de su elemento principal (traducido); y luego aplica el traducir a un div dentro de la position: fixed envoltorio position: fixed .

Los resultados se ven algo como esto (en tu caso):

 
Inner block

Fiddle Fork: https://jsfiddle.net/hju4nws1/

Si bien esto puede no ser ideal para algunos casos de uso, normalmente si está arreglando un div probablemente no le importe qué elemento es su elemento primario / dónde se encuentra en el árbol de herencia en su DOM, y parece resolver la mayor parte del dolor de cabeza – al tiempo que permite tanto la translate como la position: fixed para vivir en armonía (relativa).

Estoy teniendo un problema similar y creo que hay trabajo alrededor. Estoy utilizando snap.js y quiero que uno de los divs secundarios del contenedor de contenido se fije a su posición. Sin embargo, cuando se abre el cajón, JavaScript activa la propiedad transform: translate3d para el contenedor primario y esto también afecta al elemento hijo fijo (el elemento fijo se mueve junto con su elemento principal y permanece fijo en la nueva posición).

Dicho esto, la propiedad fija se vuelve parcialmente inútil. Para resolver esto, se puede agregar un detector de eventos que activaría un tranform por separado: translate3d para el div infantil fijo. Y la dirección de este traducir debe ser opuesta a la transformación de los padres: translate3d.

El único problema es que no sé cómo escribirlo y hubiera sido genial si alguien lo hubiera apuñalado.

Me encontré con el mismo problema. La única diferencia es que mi elemento con ‘posición: fijo’ tenía sus propiedades de estilo ‘superior’ e ‘izquierda’ establecidas desde JS. Así que pude aplicar una solución:

 var oRect = oElement.getBoundingClientRect(); 

El objeto oRect contendrá coordenadas superiores e izquierdas reales (relativas al puerto de visualización). Para que pueda ajustar sus propiedades reales oElement.style.top y oElement.style.left.

Tengo una barra lateral fuera de canvas que usa -webkit-transform: translate3d. Esto me impedía colocar un pie de página fijo en la página. Resolví el problema al dirigirme a una clase en la página html que se agrega a la etiqueta al inicializar la barra lateral y luego escribir un css: no calificador para indicar “-webkit-transform: none;” a la etiqueta html cuando esa clase no está presente en la etiqueta html. Espero que esto ayude a alguien con este mismo problema.

Intenta aplicar la transformación opuesta al elemento secundario:

 
Inner block

Agregue una clase dinámica mientras el elemento se transforma. $('#elementId').addClass('transformed') . Luego ve a declarar en css,

 .translat3d(@x, @y, @z) { -webkit-transform: translate3d(@X, @y, @z); transform: translate3d(@x, @y, @z); //All other subsidaries as -moz-transform, -o-transform and -ms-transform } 

entonces

 #elementId { -webkit-transform: none; transform: none; } 

entonces

 .transformed { #elementId { .translate3d(0px, 20px, 0px); } } 

Ahora la position: fixed cuando se proporciona con los valores de las propiedades top y z-index en un elemento secundario simplemente funciona bien y permanece fijo hasta que el elemento principal se transforma. Cuando se revierte la transformación, el elemento secundario aparece como fijo nuevamente. Esto debería facilitar la situación si realmente está utilizando una barra lateral de navegación que se abre y se cierra al hacer clic, y tiene un conjunto de tabs que debe permanecer pegajoso a medida que se desplaza hacia abajo de la página.

Una forma de lidiar con esto es aplicar la misma transformación al elemento fijo:

 
Inner block

Si está trabajando en dispositivos móviles con un menú de descarga, quizás este código lo ayude.

  $('#toggle-button').click(function () { slideout.toggle(); // Sticky menu with off canvas menu (for mobile) var isMenuDisplaced = $('.sticky-menu').hasClass('is-displaced'); if (isMenuDisplaced === false) { $('.sticky-menu').addClass('is-displaced'); var scrollTopPosition = $(window).scrollTop(); $('.sticky-menu').css('position', 'absolute'); $('.sticky-menu').css('top', scrollTopPosition + 'px'); } else { window.setTimeout(function () { $('.sticky-menu').removeClass('is-displaced'); $('.sticky-menu').css('position', 'fixed'); $('.sticky-menu').css('top', 0); }, 400); } })