Position sticky not working in IE

Question

I'm using a sticky footer. By default the footer was position:fixed. When the page reaches bottom it will changes to position:sticky.

It was working fine in chrome and firefox. But not working in IE11. Still remain as position:fixed even after reached the footer. I think whether sticky was not supported by IE11 or not. Does i have any solution for this.

Check below code:

$(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>

Solution

This is a known bug in IE. Read here and here

You can try using flex or flexbox but it's not official W3C, you can try with something like flex: 1 0 auto;

Or something like position: fixed; bottom: 0

Quick search gives up this thread in github, read here

Comments

[Facundo Corradini]

No, it's not supported caniuse.com/#search=Sticky

[Kaushik C]

It's not Supported in IE11 You can use Polyfill

[mplungjan]

I made you a snippet. Please complete it to make a minimal reproducible example

[Prasath V]

Ok. Any alternate solutions