html - 带有粘性菜单的仅 CSS 视差滚动

问题描述

我知道background-attachment: fixed出口和移动设备的问题以及如何解决那些使用stick. 但我正在寻找一种用于背景略微变化的视差滚动的 CSS 解决方案。

通过将视差容器的高度设置为height: 100vh：

.parallax-container {
    height: 100vh;
    perspective: 300px;
}

transform: translateZ(-600px) scale(3);并使用类似的东西parallax-layer来实现转移。

HTML

<body>
  <header>
  </header>
  <main class="parallax-container">
     <section>some content</section>
     <div class="parallax-content">
        <div class="parallax-layer-1"></div>
     </div>
     <section>some content</section>
  </main>
</body>

虽然这本身工作正常，但当我想应用于position: sticky标题时我开始遇到问题，因为height: 100vh在.parallax-container容器上打破了粘性行为，因为现在粘性认为parallax-container只有 height 100vh。

position: fixedheader如果我不知道标题的实际高度，则不会工作。

我也可以使.parallax-container可滚动而正文不可滚动，但是滚动条位于标题下方，这也很烦人。

我知道我可以使用 JavaScript 来解决这个问题，但是有没有 CSS 唯一的方法来获得sticky标题和 3D 视差效果？

标签： htmlcss

html - 带有粘性菜单的仅 CSS 视差滚动

问题描述

解决方案

推荐阅读