Position: sticky buttons not working in IE 11

Question

I need to make the div containing the buttons sticky, so that the buttons in that div will stay at the bottom as the user scrolls the screen.

This is so that the user does not have to scroll all the way down to click on the buttons.

The div containing the buttons is all the way down here:

<div class="form-group sticky-button-thing-not-working-on-ie">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Save" class="btn btn-default" />
    </div>
</div>

The CSS class to make it sticky (working on Firefox):

.sticky-button-thing-not-working-on-ie {
    position: sticky;
    bottom: 0;
    right: 0;
    background: rgba(0, 211, 211, 0.6);
}

But the same is not working on Internet Explorer 11. Any help on how to get the same code working on IE11?

Expected result:

Sample page: https://jsfiddle.net/thunderbolt36/a4yjfg13/

Answer 1

sticky doesn't work on IE11, but luckily, in this case, you can use fixed, which will work on both old and new browsers.

.sticky-button-thing-not-working-on-ie {
  position: fixed;                          /* added to support older browsers */
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

And you can actually drop sticky, since it's not used how it's intended. sticky excels i.e. when you position it below the top edge, and when one scroll down it it will move with the page until it reach the top edge, where it will stop and stay until one scroll up again.

Side note: Edge support sticky from version 16