在 IE 和页脚顶部制作一个 div 粘性

Question

我想让一个 div 粘在滚动上，但是当它总是停留在页脚的顶部时。

我尝试使用position:stickywhich 工作正常，但它在 IE11 上不起作用。

我也为类似的问题尝试了多种解决方案，但他们总是提到如何使页脚具有粘性，而不是<div>在 main <div>.

这是我的代码的样子：

.slider {
  background: #006264;
  color: white;
  position: sticky;
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

<div class="main">
  <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>

这是在JSFiddle 上

我该如何解决这个问题？