位置:粘滞按钮在IE 11中不起作用 [英] Position: sticky buttons not working in IE 11
问题描述
我需要使包含按钮的div保持粘性，以便在用户滚动屏幕时该div中的按钮保持在底部.
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.
包含按钮的div一直到这里:
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 '^[A-Z]+[a-zA-Z''-'\s]*$'."
data-val-regex-pattern="^[A-Z]+[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 '^[A-Z]+[a-zA-Z''-'\s]*$'."
data-val-regex-pattern="^[A-Z]+[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类(在Firefox上运行):
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);
}
但是，在Internet Explorer 11上却无法正常工作.如何在IE11上获得相同代码的帮助?
But the same is not working on Internet Explorer 11. Any help on how to get the same code working on IE11?
预期结果:
示例页面: https://jsfiddle.net/thunderbolt36/a4yjfg13/
推荐答案
sticky在IE11上不起作用，但是幸运的是，在这种情况下，您可以使用fixed，它在新旧浏览器上均可使用
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);
}
您实际上可以删除sticky，因为未按预期使用它. sticky很出色，例如，当您将其放置在顶部边缘下方时，当它向下滚动时，它将随页面一起移动，直到到达顶部边缘为止，在那里它将停止并停留直到再次向上滚动.
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.
侧面说明:版本16的边缘支持sticky
这篇关于位置:粘滞按钮在IE 11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
