I need to make a sticky element containing buttons so that the buttons in that element stay below when the user scrolls the screen.
This is done so that the user does not have to completely scroll through the page to click on the buttons.
The div containing the buttons is completely 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 '^[AZ]+[a-zA-Z''-'\s]*$'." data-val-regex-pattern="^[AZ]+[a-zA-Z''-'\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 '^[AZ]+[a-zA-Z''-'\s]*$'." data-val-regex-pattern="^[AZ]+[a-zA-Z''-'\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>
CSS class to make it sticky (works 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 does not work in Internet Explorer 11. Any help on how to get the same code running on IE11?
Expected Result: 
Example page: https://jsfiddle.net/thunderbolt36/a4yjfg13/
source share