Html 位置：粘性按钮在 IE 11 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37646066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position: sticky buttons not working in IE 11
提问by Tx36
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.
我需要使包含按钮的 div 具有粘性，以便在用户滚动屏幕时该 div 中的按钮将保持在底部。
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 一直在这里：
<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>The CSS class to make it sticky (working on Firefox):
使其具有粘性的 CSS 类（在 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?
但同样不适用于 Internet Explorer 11。有关如何在 IE11 上运行相同代码的任何帮助？
Expected result: 
预期结果：
Sample page: https://jsfiddle.net/thunderbolt36/a4yjfg13/
回答by Ason
stickydoesn't work on IE11, but luckily, in this case, you can use fixed, which will work on both old and new browsers.
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);
}
And you can actually drop sticky, since it's not used how it's intended. stickyexcels 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.
你实际上可以 drop sticky，因为它没有按预期使用。sticky擅长即当您将其放置在顶部边缘下方时，当向下滚动时，它将随页面移动直到到达顶部边缘，在那里它将停止并停留直到再次向上滚动。
Side note: Edge support stickyfrom version 16
旁注：sticky版本 16 的边缘支持
回答by aardrian
IE11 will not support position:stickyand never will (as it is being superceded by Edge): see browser support at Can I Use
IE11 将不支持position:sticky也永远不会支持（因为它被 Edge 取代）：请参阅 Can I Use 中的浏览器支持
CSS Tricks recently posted something that may help: Sticky Footer, Five Ways
CSS Tricks 最近发布了一些可能有帮助的内容：粘性页脚，五种方法
Even then, the flexexample won't work with IE11, but you can tweak it using code from Normalizing Cross-browser Flexbox Bugs.
即便如此，该flex示例也不适用于 IE11，但您可以使用Normalizing Cross-browser Flexbox Bugs 中的代码对其进行调整。
回答by nachtigall
This can be best solved by StickyBits, which is a polyfill for position: stickyfor IE (and other browsers): https://github.com/dollarshaveclub/stickybits
这可以通过 StickyBits 最好地解决，它是position: stickyIE（和其他浏览器）的 polyfill ：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.
它没有围绕 position: fixed 构建的插件所具有的跳跃性，因为它试图首先支持 position:sticky。
回答by gtamborero
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.
由于 Internet Explorer 不支持 position:sticky，我为 Internet Explorer 做了一个 position:fixed 版本，与其他导航器 100% 兼容。在这段 Javascript 代码中，我首先检查导航器是否为 Explorer，然后对样式应用一些更改。
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.
就我而言，我将“sticky-top-ie”类添加到“sticky-top”类中。'sticky-top' 是一个带有 position:sticky 和一些其他 css 代码的类。
This code will not solve directly your problem; you will need to modify and test your code over IE and other navigators.
此代码不会直接解决您的问题；您将需要通过 IE 和其他导航器修改和测试您的代码。
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:
相关 CSS：
.sticky-top-ie{
position:fixed;
width:100%;
z-index:99;
top:0px;
}
