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>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>


    <div class="container body-content">
      <h2>Edit</h2>
      <form action="/Movies/Edit/3" method="post">
        <input name="__RequestVerificationToken" type="hidden" value="kBoJXRfdKTYn4uw8fXl3V_yNVa_xD1s0vyepuNLJLxC3InZ-jA1R4b9EjFDO3SGMMp6T7E91m_wy9vGzm4Z0WUm1_8vljyrKMz6frJcQBqY1" />
        <div class="form-horizontal">
          <h4>Movie</h4>
          <hr />

          <input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="3" />

          <div class="form-group">
            <label class="control-label col-md-2" for="Title">Title</label>
            <div class="col-md-10">
              <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 3 and a maximum length of 60." data-val-length-max="60" data-val-length-min="3" id="Title" name="Title" type="text" value="Ghostbusters 2"
              />
              <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-md-2" for="ReleaseDate">Release Date</label>
            <div class="col-md-10">
              <input class="text-box single-line" data-val="true" data-val-date="The field Release Date must be a date." data-val-required="The Release Date field is required." id="ReleaseDate" name="ReleaseDate" type="date" value="1986-02-23" />
              <span class="field-validation-valid" data-valmsg-for="ReleaseDate" data-valmsg-replace="true"></span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-md-2" for="Genre">Genre</label>
            <div class="col-md-10">
              <input class="text-box single-line" data-val="true" data-val-length="The field Genre must be a string with a maximum length of 30." data-val-length-max="30" data-val-regex="The field Genre must match the regular expression &#39;^[A-Z]+[a-zA-Z&#39;&#39;-&#39;\s]*$&#39;."
              data-val-regex-pattern="^[A-Z]+[a-zA-Z&#39;&#39;-&#39;\s]*$" data-val-required="The Genre field is required." id="Genre" name="Genre" type="text" value="Comedy" />
              <span class="field-validation-valid" data-valmsg-for="Genre" data-valmsg-replace="true"></span>
            </div>
          </div>



          <div class="form-group">
            <label class="control-label col-md-2" for="Price">Price</label>
            <div class="col-md-10">
              <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="The field Price must be between 1 and 100." data-val-range-max="100" data-val-range-min="1" data-val-required="The Price field is required."
              id="Price" name="Price" type="text" value="9.99" />
              <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-md-2" for="Rating">Rating</label>
            <div class="col-md-10">
              <input class="text-box single-line" data-val="true" data-val-length="The field Rating must be a string with a maximum length of 5." data-val-length-max="5" data-val-regex="The field Rating must match the regular expression &#39;^[A-Z]+[a-zA-Z&#39;&#39;-&#39;\s]*$&#39;."
              data-val-regex-pattern="^[A-Z]+[a-zA-Z&#39;&#39;-&#39;\s]*$" id="Rating" name="Rating" type="text" value="G" />
              <span class="field-validation-valid" data-valmsg-for="Rating" data-valmsg-replace="true"></span>
            </div>
          </div>


          <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>
        </div>
      </form>
</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/

Solution 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

Solution 2

IE11 will not support position:sticky and never will (as it is being superceded by Edge): see browser support at Can I Use

CSS Tricks recently posted something that may help: Sticky Footer, Five Ways

Even then, the flex example won't work with IE11, but you can tweak it using code from Normalizing Cross-browser Flexbox Bugs.

Solution 3

This can be best solved by StickyBits, which is a polyfill for position: sticky for IE (and other browsers): https://github.com/dollarshaveclub/stickybits

Most important to me:

it does not have the jumpiness that plugins that are built around position: fixed have because it tries to support position: sticky first.

Solution 4

As Internet Explorer doesn't support position: sticky, I have done a position:fixed version for Internet Explorer 100% compatible with other navigators. In this Javascript code first I check if the navigator is Explorer, and then apply some changes to the styles.

In my case I add the class 'sticky-top-ie' to the class 'sticky-top'. 'sticky-top' is a class with position: sticky and some other css code.

This code will not solve directly your problem; you will need to modify and test your code over IE and other navigators.

JAVASCRIPT CODE:

<script>
(function($) {

// Check if Navigator is Internet Explorer
if(navigator.userAgent.indexOf('MSIE')!==-1
|| navigator.appVersion.indexOf('Trident/') > -1){

    // Scroll event check
    $(window).scroll(function (event) {
        var scroll = $(window).scrollTop();

        // Activate sticky for IE if scrolltop is more than 20px
        if ( scroll > 20) {
            $('.sticky-top').addClass( "sticky-top-ie" );
        }else{
            $('.sticky-top').removeClass( "sticky-top-ie" );        
        }

    });

}

})( jQuery );
</script>

RELATED CSS:

 .sticky-top-ie{
     position:fixed;
     width:100%;
     z-index:99;
     top:0px;
 } 

View more solutions