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

Question

我正在尝试重现滚动库 Locomotive-scroll 中使用的固定定位效果。 Demo for the library- section 04 和 library documentation here。 我想要实现的是：我在页面下方有一个画布；当滚动并到达画布时，它应该固定在视口上（比如作为背景），而底部的文本通常会在其上滚动。我不太清楚如何实现它。 这是一个工作链接（目前不能使用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% 的屏幕高度。

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

我已经在一个当前项目中完成了这项工作，并且效果很好。

祝你好运！

Answer 2

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