sticky - Can't wrap my head around Locomotive Scroll sticky 属性

Question

我正在尝试修复英雄和页脚排序，因此当页面滚动时，内容将翻过（不动的）英雄，当您到达内容的末尾时，也会显示同样不动的页脚。

我搞砸了data-scroll-sticky，data-scroll-target但没有成功。任何人都可以发光吗？

任何帮助表示赞赏！

密码笔

<section scrollContainer>

    <div scrollSection class="panel hero">hero</div>
    <div scrollSection class="panel cont1">content</div>
    <div scrollSection class="panel cont2">more content</div>
    <div scrollSection class="panel cont3">even more content</div>
    <div scrollSection class="panel footer">footer</div>
  
</section>

Answer 1

这样你就可以使用粘性页脚

<div data-scroll-section class="sticky-footer">
    <div class="fixed-target" id="fixed-target"></div>
    <div class="fixed-element" data-scroll data-scroll-sticky data-scroll-target="#fixed-target">
        <div class="container">....</div>
    </div>
</div>

CSS

.sticky-footer {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.fixed-target {
  bottom: -100vh;
}
.fixed-element,
.fixed-target {
  position: absolute;
  top: -100vh;
  right: 0;
  left: 0;
}
.fixed-element {
  height: 100%;
  width: 100%;
  background: url(../img/black2.jpg);
  background-color: black;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}