html - 位置 : sticky buttons not working in IE 11

Question

我需要使包含按钮的 div 具有粘性，以便当用户滚动屏幕时该 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>

.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>

使其具有粘性的 CSS 类(在 Firefox 上工作):

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

但同样的方法在 Internet Explorer 11 上不起作用。有关如何使相同代码在 IE11 上工作的任何帮助？

预期结果:

示例页面:https://jsfiddle.net/thunderbolt36/a4yjfg13/

Answer 1

sticky 不适用于 IE11，但幸运的是，在这种情况下，您可以使用 fixed，它适用于新旧浏览器。

.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);
}

您实际上可以删除 sticky，因为它没有按预期使用。 sticky 非常出色，即当您将它放在顶部边缘下方时，当向下滚动时它会随页面移动直到到达顶部边缘，它会停止并停留直到再次向上滚动。

旁注:Edge 从版本 16 开始支持 sticky