Question

我遇到一个问题，当body元素用作具有以下css的视差容器时，固定元素（nav）会移动：

.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
     overflow-y:auto;
}

原始body元素有这个css：

html,body {
    width: 100%;
    margin: 0px;
    margin-bottom: -1.4rem;
    overflow-x: hidden;
    display: block;
    font-size: 10px;
}

原始导航有这个css：

nav {
    position: fixed;
    top: 0rem;
    right: 0rem;
    height: 100%;
    /*animation*/
    transition-timing-function: all ease 0.3s;
    -webkit-transition: all ease 0.3s; /* Safari */
    transition: all ease 0.3s;
}

当视差类应用于body元素时，固定位置样式只会中断。

所有这些都在html的表示中：

<body class="parallax">
    <header></header>
    <div></div>
    <nav></nav>
</body>

为什么会破裂？

编辑以澄清一些混淆：不涉及javascript，视差容器类如上所示，没有添加任何其他内容。在检查时，nav元素仍然具有应用于它的固定位置样式

以下是fiddle

（顺便说一下，我知道解决办法是将视差添加到另一个容器，并在该容器外部使用导航，但为了确保iOS缩小了主体需要的网址栏成为滚动的元素

Answer 1

问题是由于perspective类添加了.parallax。

这是无法克服的。

每次向元素添加变换（对于透视图而言）时，它都会成为任何已定位子项的定位“基础”，包括position: fixed。您的位置：固定导航元素相对于已转换的父

固定

固定元素在视差元素内滚动

1 个答案: