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

Question

我正在尝试重现滚动库 Locomotive-scroll 中使用的固定定位效果。 Demo for the library- section 04和 library documentation here 。我想要实现的是:我在页面下方有一个 Canvas ；当滚动并到达 Canvas 时，它应该保持固定在视口(viewport)上(可以说，作为背景)，而底部的文本通常在其上滚动。我不太清楚如何实现它。这是一个工作链接(目前无法使用pastebin或其他): my demo

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 代码。我在这里删除了相关代码，因为源代码要长得多。

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

Answer 1

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

我之前所做的是将目标高度设置为:100vh，以便粘性元素粘在屏幕高度的 100% 上。

要让其他元素 float 经过此粘性元素，您可能需要将它们(或其包装容器)设置为position:absolute并添加“top”值以使它们进一步向下开始。像这样放置，它们可以独立于粘性容器移动。

我已经在当前的元素中完成了此操作，并且运行良好。

祝你好运!