‘transform3d’ ne fonctionne pas avec la position: enfants fixes

J’ai une situation où, dans des circonstances CSS normales, un div fixe serait positionné exactement là où il est spécifié ( top:0px , left:0px ).

Cela ne semble pas être respecté si un parent a une transformation translate3d. Est-ce que je ne vois rien? J’ai essayé d’autres options comme le style et la transformation, mais je n’ai pas eu de chance.

J’ai attaché un JSFiddle avec un exemple où je m’attendais à ce que la case jaune soit dans le coin supérieur de la page plutôt qu’à l’intérieur de l’élément conteneur.

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

Ceci est une version simplifiée du violon:

 
Inner block

Tous les indicateurs permettant de faire fonctionner translate3d avec des enfants à poste fixe seront appréciés.

En effet, la transform crée un nouveau système de coordonnées local, conformément aux spécifications W3C :

Dans l’espace de noms HTML, toute valeur autre que none pour la transformation entraîne la création à la fois d’un contexte d’emstackment et d’un bloc conteneur. L’object agit comme un bloc contenant pour les descendants à position fixe.

Cela signifie que le positionnement fixe est fixé à l’élément transformé plutôt qu’à la fenêtre d’affichage.

Il n’y a pas actuellement de solution de rechange à ma connaissance.

Il est également documenté dans l’article d’Eric Meyer: Un-fixed Fixe with CSS Transforms .

Comme Bradoergo l’a suggéré, il suffit d’obtenir la fenêtre scrollTop et de l’append à la position absolue comme:

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

Cela a fonctionné pour moi de toute façon.

J’ai eu un scintillement sur ma navigation top fixe lorsque des éléments de la page utilisaient transform, les éléments suivants appliqués à ma navigation top ont résolu le problème de saut / scintillement:

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

Merci à cette réponse sur SO

Dans Firefox et Safari, vous pouvez utiliser la position: sticky; au lieu de position: fixed; mais cela ne fonctionnera pas dans d’autres navigateurs. Pour cela, vous avez besoin de javascript.

Alors,

N’ayant pas trouvé de méthode satisfaisante pour y faire face; et faire des trucs sur des panneaux hors-canvas (nécessitant une traduction) – j’ai creusé un peu et découvert que (du moins pour mon cas d’utilisation) la meilleure méthode pour y remédier est d’appliquer le même traducteur, mais casser les enfants qui doivent être fixé à partir de leur élément parent (traduit); et ensuite appliquer le traduire à un div à l’intérieur de la position: fixed wrapper position: fixed .

Les résultats ressemblent à ceci (dans votre cas):

 
Inner block

fourche de violon: https://jsfiddle.net/hju4nws1/

Bien que cela ne soit peut-être pas idéal pour certains cas d’utilisation, généralement, si vous corrigez un div, vous pourriez vous soucier moins de savoir quel élément est son parent / où il se trouve dans l’arbre de l’inheritance de votre DOM. – tout en permettant à la fois de translate et de position: fixed pour vivre en harmonie (relative).

J’ai un problème similaire et je crois qu’il y a du travail à faire. J’utilise snap.js et je veux qu’un des div enfants du conteneur de contenu soit fixé à sa position. Toutefois, lorsque le tiroir s’ouvre, le JavaScript déclenche la propriété transform: translate3d pour le conteneur parent, ce qui affecte également l’élément enfant fixe (l’élément fixe se déplace avec son parent et rest fixe dans le nouvel emplacement).

Cela étant dit, la propriété fixe devient partiellement inutile. Pour résoudre ce problème, vous pouvez append un écouteur d’événement qui déclencherait une forme distincte: translate3d pour la div enfant fixe. Et la direction de cette traduction devrait être opposée à la transformation du parent: translate3d.

Le seul problème est que je ne sais pas comment l’écrire et que ça aurait été cool si quelqu’un avait tenté sa chance.

J’ai rencontré le même problème. La seule différence est que mon élément avec ‘position: fixed’ avait ses propriétés de style ‘top’ et ‘left’ définies à partir de JS. J’ai donc pu appliquer un correctif:

 var oRect = oElement.getBoundingClientRect(); 

L’object oRect contiendra des coordonnées réelles (relatives au port de vue) en haut et à gauche. Vous pouvez donc ajuster vos propriétés réelles oElement.style.top et oElement.style.left.

J’ai une barre latérale hors canvas qui utilise -webkit-transform: translate3d. Cela m’empêchait de placer un pied de page fixe sur la page. J’ai résolu le problème en ciblant une classe sur la page HTML ajoutée à la balise lors de l’initialisation de la barre latérale, puis en écrivant un qualificatif css: not pour indiquer “-webkit-transform: none;” à la balise html lorsque cette classe n’est pas présente sur la balise html. J’espère que cela aide quelqu’un là-bas avec ce même problème!

Essayez d’appliquer la transformation opposée à l’élément enfant:

 
Inner block

Ajoutez une classe dynamic pendant que l’élément est transformé. $('#elementId').addClass('transformed') . Puis continuez à déclarer 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 } 

puis

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

puis

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

Maintenant position: fixed lorsqu’il est fourni avec une propriété top et z-index sur un élément enfant fonctionne correctement et rest fixe jusqu’à ce que l’élément parent se transforme. Lorsque la transformation est annulée, l’élément enfant apparaît à nouveau comme fixe. Cela devrait faciliter la situation si vous utilisez une barre latérale de navigation qui s’ouvre et se ferme après un clic, et vous avez un ensemble de tabulations qui doit restr collant lorsque vous faites défiler la page.

Une façon de gérer cela est d’appliquer la même transformation à l’élément fixe:

 
Inner block

Si vous travaillez sur mobile avec un menu offcanvas, ce code vous aidera peut-être.

  $('#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); } })