我正在尝试重现滚动库机车滚动中使用的固定定位效果。 库的演示 - 第 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 代码。 我在这里剥离了相关代码，因为源代码要长得多。
提前感谢任何有耐心建议的人。
如果没有看到一些 css 或更好的代码笔示例，这很困难，但我看到您添加了属性"data-scroll-sticky"和目标"data-scroll-target="#c-fixed_wrapper"，这是正确的。
我之前所做的是使目标高度：100vh，以便粘性元素粘住屏幕高度的100%。
要让其他元素浮动在这个粘性元素上，您可能需要将它们(或其包装容器(设置为 position：absolute 并添加一个"top"值以使它们进一步向下开始。像这样定位，它们可以独立于粘性容器移动。
我已经在当前的项目中完成了此操作，并且运行良好。
祝你好运！
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
我有一个 cookie 聚合按钮，如果用户不接受 cookie，我必须将其固定在底部，因此我已将其固定并赋予它 zIndex max 并将其放置在机车容器外
样本：
<div>
<button class="accept-cookie">Accept Cookie</button>
<main data-scroll-container> <!-- locomotive container -->
....
</main>
.accept-cookie {
position: fixed;
bottom: 5px;
z-index: 9999999999;
....
}
我遇到了同样的问题，解决方案是将data-scroll-target设置为外部data-scroll-container。
<div data-scroll-container id="scroll-container">
...
<div class="fixed" data-scroll data-scroll-sticky data-scroll-target="#scroll-container">
// Fixed content