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

【问题标题】：Can't wrap my head around Locomotive Scroll sticky attributeCan't wrap my head around Locomotive Scroll sticky 属性
【发布时间】：2021-06-09 22:32:18
【问题描述】：

我正在尝试修复英雄和页脚排序，所以当页面滚动时，内容将滚动到（不动的）英雄，当你到达内容的末尾时，同样不动的页脚将被显示.

我搞砸了data-scroll-sticky 和data-scroll-target，但没有成功。有人能解释一下吗？

感谢任何帮助！

Codepen

<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>

【问题讨论】：

标签： sticky locomotive-scroll

【解决方案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;
}

【讨论】：