如何在IE上实施职位置顶

Question

这里是this blog的热门职位：

https://jsfiddle.net/f29yh51n/

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa;
}
.main-content{
  min-height:1000px;
}

.main-footer{position:-webkit-sticky; position:sticky; bottom:0; border-color:red;}

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>
<br><br><br><br>

这意味着页脚底部有粘性，当我们到达粘性容器（父级）的末端时，元素将停止在其自然位置。

由于IE不支持粘性，因此在IE上不起作用。是否有任何技巧也可以在IE上使其正常工作？

（不是重复的，因为我已经尝试了另一个问题的建议解决方法-从3年之前开始-）我当前的解决方法是在IE上使用position：fixed，因此它的行为像粘性的，但是并没有停止向下滚动时保持其位置，但始终保持在视口底部。