javascript - 机车滚动如何使元素固定在滚动上

问题描述

我正在尝试重现滚动库 Locomotive-scroll 中使用的固定定位效果。库的演示 - 第 04 节和库文档在这里。我想要实现的是：我在页面下方有一个画布；当滚动并到达画布时，它应该固定在视口上（比如作为背景），而底部的文本通常会在其上滚动。我无法完全弄清楚如何实现它。这是一个工作链接（目前不能使用 pastebin 或其他）：我的演示

HTML:
<section id="c-canvas" class="c-section -fixed" data-scroll-section data-persistent>
    <div class="o-container" id="fixed-elements">
      <div class="o-layout">
        <div class="o-layout_item">
          <div class="c-fixed_wrapper" id="c-fixed_wrapper">
            <!--<div class="c-fixed_target" id="fixed-target"></div>-->
                <canvas id="c-canvas_scene" data-scroll data-scroll-sticky data-scroll-target="#c-fixed_wrapper"></canvas>
          </div>
        </div>
        <div class="o-layout_item">
          <div class="c-section" id="fixed-text" data-scroll data-scroll-sticky data-scroll-target="#fixed-elements">
            <div class="b-block_internal">
              <p>Maison Operative apre la sua nuova location in 400 mq di uno store, suddiviso in due livelli, il cui concept rielabora l’immagine iconica di uno dei primi giochi elettronici, il flipper.</p>
            </div>
            <div class="b-block_internal">
              <p>Le linee curve, le ombreggiature, i giochi di luci led e i materiali metallici impiegati nel nostro nuovo store, riportano il visitatore in un altro tipo di realtà dove design a fashion sono perfettamente mixati.</p>
            </div>
            <div class="b-block_internal">
              <p>Così come abbiamo mischiato e giocato con elementi architettonici e di design, allo stesso modo cerchiamo di trasferire questo tipo di personalità ai nostri clienti: ci piace mescolare materiali e tessuti differenti per i nostri outfit e per quelli che suggeriamo e proponiamo alla nostra utenza.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

JS:
const scroll = new LocomotiveScroll({
      el: document.querySelector('#app'),
      smooth: true
    });

我使用与 Locomotive 演示相同的 CSS 代码。我已经在这里剥离了相关代码，因为源代码要长得多。

提前感谢任何有耐心提出建议的人。

标签： javascripthtmlcsscanvas

没有看到你的一些 css 或更好的 codepen 示例很难，但我看到你添加了属性“data-scroll-sticky”和目标“data-scroll-target="#c-fixed_wrapper"，这是正确的.

我之前所做的是使目标高度：100vh 使粘性元素保持 100% 的屏幕高度。

要让其他元素漂浮在这个粘性元素之上，您可能需要将它们（或它们的包装容器）设置为 position:absolute 并添加一个“顶部”值以使它们进一步向下开始。像这样定位，它们可以独立于粘性容器移动。

我已经在一个当前的项目中做到了这一点，并且运行良好。

祝你好运！

javascript - 机车滚动如何使元素固定在滚动上

问题描述

解决方案

推荐阅读