位置：固定和转换 - 如何返回正常的固定行为？

Question

我使用addBack()作为移动修复（我需要不断渲染div）。 但是$('.report-content h2').each(function(){ var $set = $(this).nextUntil("h2").addBack(); $set.wrapAll('<div class="content" />'); }); 创建了另一个上下文，现在我的transform: translateZ(0); div的高度取决于父级高度，而不是视口高度，因为它没有transform。

我需要fixed，但我也需要正常的transform行为。我该怎么办？

Answer 1

Chrome上有很多关于此“问题”的错误报告。我在写一个粘性插件时遇到了同样的问题，但事实证明这实际上是正常的行为。这是因为transform根据W3 specs使用了自己的坐标系。基本上，元素相对于它自己的固定位置获得固定位置。不幸的是，你无能为力。

可能的解决方案

解决问题的方法是将“粘性”元素设置为相对于文档的absolute位置。然后使用JavaScript重新定位元素。有点像：

var element = document.getElementById('element');

window.addEventListener('scroll', function() {
    requestAnimationFrame(setTop);
});

function setTop() {
    element.style.top = window.pageYOffset;
}

这样，元素的行为就好像它有一个固定的位置，而你仍然能够毫无问题地使用transform属性。