在 IE 11 中离屏时无法使元素粘在底部，就像在 css sticky 中一样

Question

我正在尝试复制与此相同的行为 codepen 在 IE 11 中（没有 css 置顶）

我能够在开始时检测到项目何时离开屏幕：

if (
  $(".main-content").height() + $(".main-content").offset().top <
  $(".main-footer").offset().top
)

但是当它到达滚动末尾（在本例中为页面）时，我没有设法检查它何时再次离开屏幕。减去滚动条来确定元素是否在屏幕外可能很简单，我只是被卡住了...

这里是 codepen 我现在卡住的地方。

Answer 1

IE doesn't support <main>所以在IE 11中不能使用这个标签。可以通过JavaScript监听滚动条的变化，然后根据class的位置改变它的元素。

这里是你可以参考的代码：

$(document).scroll(function() {
  var scroH = $(document).scrollTop();
  var viewH = $(window).height();
  var contentH = $(document).height();

  $('.main-footer').addClass('main-footer1')

  if (scroH > 100) {}
  if (contentH - (scroH + viewH) <= 100) { // The height from the bottom is less than 100px
  }
  if (contentH <= (scroH + viewH + 100)) {
    $('.main-footer').removeClass('main-footer1')
    $('.main-footer').addClass('main-footer2')
  } else {
    $('.main-footer').addClass('main-footer1')
    $('.main-footer').removeClass('main-footer2')
  }

});

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 {
  border-color: red;
}

.main-footer1 {
  position: fixed;
  bottom: 0px;
  margin: 0 auto;
  width: 570px;
}

.main-footer2 {
  position: relative;
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN contentH</div>
  <footer class="main-footer">footer</footer>
</div>

IE 11 中的结果：

在 IE 11 中离屏时无法使元素粘在底部，就像在 css sticky 中一样

Not able to make element stick to the bottom when offscreen in IE 11, just like in css sticky

javascript

css

internet-explorer-11