position: sticky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickybits/3.7.7/stickybits.min.js"></script>
<div class="main js-stickybit-paren">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="slider">
   This is the footer
  </div>
</div>
<div class="footer">This is the main footer</div>

CSS

html, body {
    margin: 0;
}
.main {
  position: relative;
}


.placeholder {
    border: 1px solid black;
    margin: 0 auto;
    text-align: center;
    height: 300px;
}

.slider {
    background: #006264;
    color: white;
    width: 100%;
    height: 60px;
}
.slider.js-is-sticky--change {
  background: red;
}
.footer {
    background: #04246A;
    color: white;
    font-weight: bold;
    margin: 0 auto;
    height: 119px;
}

JavaScript

let t = stickybits('.slider', {verticalPosition: 'bottom',useStickyClasses: true,stickyBitStickyOffset: 30,useGetBoundingClientRect: true});
t.update();