Question

我正在使用粘性页脚。默认情况下，页脚为position:fixed。当页面到达底部时，它将更改为position:sticky。

它在chrome和firefox中运行良好。但不适用于IE11。在到达页脚后仍然保持position:fixed。我认为IE11是否不支持sticky。我有什么解决办法吗？

检查以下代码：

$(document).scroll(function() {
  checkOffset();
});

function checkOffset() {
  if ($('#sticky').offset().top + $('#sticky').height() >=
    $('.bottom_two').offset().top - 10)
    $('#sticky').css({
      'position': 'sticky',
      'transiton': 'position 0.4s'
    });
  if ($(document).scrollTop() + window.innerHeight <
    $('.bottom_two').offset().top)
    $('#sticky').css({
      'position': 'fixed',
      'transiton': 'position 0.4s'
    }); // restore when you scroll up
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky" class="stick">
  <div class="container">
    <div class="bo_wrap">
      <div class="bo_wrap_left">
        <a class="bot_down testride" href="#buy_ride"></a>
        <a class="bot_down downl" href="#" target="_blank"></a>
      </div>
      <div class="clear_both"></div>
    </div>
  </div>
</div>

<div class="bottom_two">
  <div class="container">
    <p>company 2017. all rights reserved.</p>
  </div>
</div>

Answer 1

这是IE中的已知错误。 Read here和here

您可以尝试使用flex或flexbox，但它不是官方的W3C，您可以尝试flex: 1 0 auto;

之类的东西

或类似position: fixed; bottom: 0

快速搜索在github中放弃此主题，阅读here

Answer 2

基于https://developer.mozilla.org/en-US/docs/Web/CSS/position，IE11似乎不支持位置粘贴。

位置粘不在IE中工作

2 个答案: