位置：粘滞按钮在IE 11中不起作用
我需要使包含按钮的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>
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.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变得粘滞的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上使用相同代码的任何帮助？
预期结果：
5 个答案:
答案 0 :(得分：20)
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表现优异，即当你将它放在顶部边缘下方时，当向下滚动它时，它会随着页面移动直到它到达顶部边缘，在那里它将停止并保持直到再次向上滚动。
旁注：版本16的边缘支持sticky
答案 1 :(得分：8)
IE11不会支持position:sticky，也不会支持（因为它被Edge取代）：see browser support at Can I Use
CSS Tricks最近发布了一些可能有用的内容：Sticky Footer, Five Ways
即便如此，flex示例也不适用于IE11，但您可以使用Normalizing Cross-browser Flexbox Bugs中的代码进行调整。
答案 2 :(得分：5)
这可以通过StickyBits最好地解决，StickyBits是IE（和其他浏览器）position: sticky的填充：https://github.com/dollarshaveclub/stickybits
对我来说最重要的是：
它不具有围绕位置构建的插件的跳跃性：固定有因为它试图支持位置：粘性优先。
答案 3 :(得分：0)
由于Internet Explorer不支持位置：粘性，所以我做了一个position：Internet Explorer的固定版本，该版本与其他导航器100％兼容。 首先，在此Javascript代码中，我检查导航器是否为Explorer，然后对样式进行一些更改。
在我的情况下，我将“ sticky-top-ie”类添加到“ sticky-top”类中。 “ sticky-top”是具有位置的类：sticky和其他一些CSS代码。
此代码无法直接解决您的问题；您将需要通过IE和其他导航器修改和测试代码。
JAVASCRIPT代码：
<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>
相关CSS：
.sticky-top-ie{
position:fixed;
width:100%;
z-index:99;
top:0px;
}
答案 4 :(得分：-4)
检查您的页面<!DOCTYPE HTML>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？