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

Question

我想让一个 div 粘在滚动上，但是当它总是停留在页脚的顶部时。
我尝试使用 position:sticky这工作正常，但它不适用于 IE11。
我也针对类似问题尝试了多种解决方案，但他们总是提到如何使页脚具有粘性而不是另一个 <div>主内<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
我该如何解决这个问题？

Answer 1

不幸的是，我不知道任何仅使用 CSS 的方法来实现这种效果。然而，当然，使用 JavaScript 和一些额外的 CSS 是可能的。我在示例中使用了 jQuery，因为它更容易理解，但您当然可以将其转换为 JS。

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) {
    $('.main').removeClass('fixed');
  } else {
    $('.main').addClass('fixed');
  }
});

$(window).scroll();

/* resets */

body {
  margin: 0px;
  padding: 0px;
}

.main.fixed>.slider {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.main.fixed~.footer {
  margin-top: 60px;
}

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

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

.placeholder {
  padding: 100px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main fixed">
  <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 fixed">
    This is the footer
  </div>
</div>
<div class="footer">This is the main footer</div>

是的，它适用于 IE，因为 jQuery 仍然支持 IE9+。
请记住，这是一个基本示例，您应该致力于一些性能增强。