Locomotive-scroll 如何让元素固定在滚动条上

Question

我正在尝试重现滚动库 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
    });

---

我使用与机车演示相同的 CSS 代码。我在这里删除了相关代码，因为源代码更长。

在此先感谢任何有耐心建议的人。

原文由 IljaRilic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Its Easy Just Perform Following steps-

Html  ( Use always Unique Target id )

<div class="fixed_wrapper">

  <div class="fixed_target" id="fixed-target"></div>

    <div class="fixed" data-scroll data-scroll-sticky data-scroll-target="#fixed-target"
      style="background-image:url('img/bg.jpg')">
    </div>
 </div>

use this Css

.fixed_wrapper {
    position: relative;
    overflow: hidden;
    height: 818px;
}

.fixed_target {
    bottom: -100vh;
}
.fixed,
.fixed_target {
    position: absolute;
    top: -100vh;
    right: 0;
    left: 0;
}
.fixed {
    height: 100%;
    background-size: cover;
    background-position: center;
}

Work For me
Hope for you as Well

原文由 Dpk 发布，翻译遵循 CC BY-SA 4.0 许可协议