CSS粘滞按钮div在IE 11中不起作用 [英] CSS Sticky buttons div not working in IE 11

问题描述

我需要使包含按钮的div变粘，以便当用户滚动屏幕时，该div中的按钮将保持在底部。
这样用户就不必一直向下滚动来点击按钮。

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

包含这些按钮的div在这里一路显示：

 < div class =form-group sticky-button-thing-not-working-on-ie> 
< div class =col-md-offset-2 col-md-10> 
< input type =submitvalue =Saveclass =btn btn-default/> 
< / div> 
< / 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：//i.imgur .com / bEHXcrG.png

解决方案

sticky doesn在IE11上工作不错，但幸运的是，在这种情况下，您可以使用 fixed ，这可以在旧版和新版浏览器上使用。

  .sticky-button-thing-not-working-on-ie {
 position：fixed; / *添加以支持旧浏览器* / 
位置：粘滞; 
 bottom：0; 
 right：0; 
 background：rgba（0，211，211，0.6）; 
} 
  

实际上您可以删除 sticky ，因为它没有被用于它的目的。 sticky 优秀，即当您将它放置在顶部边缘下方时，当向下滚动时，它会随着页面一起移动，直到它到达顶部边缘，它将停止并停留直到再次向上滚动。

附注：边缘支持 sticky 版本16

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.

Sample page: https://jsfiddle.net/thunderbolt36/a4yjfg13/

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>

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

But the same is not working on Internet Explorer 11.

Any help on how to get the same code working on IE11?

Expected result: https://i.imgur.com/bEHXcrG.png

解决方案

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

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.

Side note: Edge support sticky from version 16

这篇关于CSS粘滞按钮div在IE 11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！