当css转换应用于固定元素的包装器时,固定元素不相对于主体定位[重复]

这是因为 transform 根据 W3C spec :

在html名称空间中,除 none 对于转换,将创建堆栈上下文和包含块。对象充当固定位置子体的包含块。

这意味着固定位置将固定到转换的元素,而不是视口。

目前还没有我知道的工作。

埃里克·迈耶的文章中也有记载: Un-fixing Fixed Elements with CSS Transforms .

正如布拉多尔戈所建议的,把窗户打开 scrollTop 然后将其添加到绝对位置顶部,如下所示:

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

不管怎样,这对我很有用。

当页面中的项目正在使用转换时,我的固定顶部导航出现闪烁,应用于顶部导航的以下内容解决了跳跃/闪烁问题:

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

Thanks to this answer on SO

在Firefox和Safari中,您可以使用 position: sticky; 而不是 position: fixed; 但它在其他浏览器中不起作用。为此,您需要javascript。

所以,

没有找到一个令人满意的方法来处理这个问题;并且做了一些非画布面板的工作(需要翻译)-我深入研究了一下,发现(至少对于我的用例)处理这个问题的最好方法是应用相同的翻译,但是,将需要从其父(已翻译)元素中修复的子元素断开,然后将转换应用于 position: fixed 包装器。

结果如下(在您的情况下):

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

提琴叉: https://jsfiddle.net/hju4nws1/

虽然这对于某些用例来说可能并不理想,但通常如果您正在修复一个div,您可能不太关心它的父元素是什么/它落在dom的继承树中的什么位置,并且似乎可以解决大多数问题,同时仍然允许 translate 和 位置:固定 和谐地生活在(相对的)和谐中

我也有类似的问题,我相信有办法解决。 我正在使用snap.js,我希望内容容器的一个子div被固定到它的位置。但是,当抽屉打开时,javascript会为父容器触发transform:translate3d属性,这也会影响固定的子元素(固定元素随其父元素一起移动并保持固定在新位置)。

这样一来,固定资产就变得部分无用了。为了解决这个问题,可以添加一个事件监听器,它将为固定的子div触发一个单独的transform:translate3d,并且这个translate的方向应该与父的transform:translate3d相反。

唯一的问题是我不知道怎么写,如果有人捅了一刀就好了。

我遇到了同样的问题。唯一的区别是,我的“position:fixed”元素的“top”和“left”样式属性是从js设置的。所以我可以应用修复:

var oRect = oElement.getBoundingClientRect();

Orect对象将包含 真实的 (相对于视图端口)顶部和左侧坐标。因此您可以调整实际的oElement.style.top和oElement.style.left属性。

我有一个使用-webkit transform:translate3d的非画布侧边栏,这使我无法在页面上放置固定页脚。我解决了这个问题,方法是在侧边栏初始化时将HTML页面上添加到标记的类作为目标,然后在HTML标记上不存在该类时将css:not qualifier to state“-webkit transform:none;”写入HTML标记。希望这能帮助其他人解决同样的问题!

尝试对子元素应用相反的变换:

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

在元素转换时添加动态类。 $('#elementId').addClass('transformed') . 然后在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 
}

然后

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

然后

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

现在 position: fixed 当提供 top 和 z-index 子元素的属性值工作正常,在父元素转换之前保持不变。当转换被还原时,子元素将再次弹出为fixed。如果您实际使用的是一个导航侧边栏,可以在单击时切换打开和关闭,并且您有一个选项卡集,当您向下滚动页面时,该选项卡集应该保持粘滞,则这种情况应该会得到缓解。

处理此问题的一种方法是对固定元素应用相同的转换:

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>