Question

我的导航栏在CSS中添加了视差效果后无法保持固定状态。

我在网站上放置了一个固定的导航栏，并带有过渡JS“ Math.round（$（window）.scrollTop（））> 490）”。

此后，我为导航栏正下方的横幅广告添加了视差。当我在CSS主体中禁用“视角：1px”时，我的导航栏再次变得固定。如果有人可以帮助我，那就太好了！谢谢。

body{
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden; 
}

.header{
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    width: 100%;
    top: 0;
    z-index: 999;
    margin-left:0;
    margin-right:0;
    color: #333333;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.5s ease;

}

.banner{
    margin-top: -20px;
    box-sizing: border-box;
    min-height: 40vw;
    padding: 30vw 0 5vw;
    position: relative;
    -webkit-transform-style: inherit;
    transform-style: inherit;
    width: 100vw;
}

.banner, .banner:before{
    background: 50% 50% / cover;
}

.banner::before{
    bottom: 0;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
    display: block;
    background-image: url(/assets/img/bg.jpg);
    background-size: cover;
    transform-origin: center center 0;
    transform: translateZ(-1px) scale(2);
    z-index : -1;
    min-height: 100vh;
    width: 100%;

}

Answer 1

Perspective将每个孩子添加到其容器块中；不排除带有position: fixed的元素。参见this question。您正在将透视图应用于body元素，这将影响页面中的每个元素，包括标题。

请考虑将除标题以外的所有页面包装在div中，然后将透视图应用于该div而不是正文。

<body>
    <header class="header">
    ...
    </header>
    <div class="page-wrap">
        <div class="banner">
        ...
        </div>
    ...
    </div>
</body>

使用CSS

body {
    height: 100%;
}
.page-wrap {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden; 
}

视差+固定菜单问题

1 个答案: