Can't wrap my head around Locomotive Scroll sticky attribute

Question

I am trying to get the hero and footer sorta fixed, so when the page is scrolled, the content will roll over the (unmoving) hero and when you get to the end of the contents, the also unmoving footer will be revealed.

I have messed with data-scroll-sticky and data-scroll-target with no success. Can anyone shed a light?

Any help is appreciated!

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>

Answer 1

This Way You Can Use Sticky Footer

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