position:sticky 不能与 display:flex 在 IE 11 上一起使用

Question

我正在尝试使 position: sticky 和 display: flex 属性在 Internet Explorer 11 上工作。

它在 Chrome、Firefox 和 Edge 上运行良好，但是，惊喜；它不适用于 Internet Explorer 11。

<div class="flexbox-wrapper">
  <div class="regular">
     This is the regular box
  </div>
  <div class="sticky">
     This is the sticky box
  </div>
</div>

.flexbox-wrapper {
  display: flex;
  height: 200px;
  overflow: auto;
}
.regular {
  background-color: blue;
  height: 600px;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

JSFIDDLE

如何让它在 IE11 上工作？

我已经尝试使用 StickyState polyfill，但没有任何结果。

如果 position: sticky 或 display: flex 在 IE11 上不起作用，这不是问题，因为它们都可以单独工作：

Position: sticky; working demo

我的主要问题是我想要主要内容部分和旁边的侧边栏菜单，滚动时应该可见。使用 position: fixed 在这里不是一个选项。

Answer 1

根据 caniuse.com 位置：IE11 不支持粘性，显示：flex 有部分支持，因为有很多错误。

我对 StickyState 没有太多经验，但我使用 StickyBits 并且它工作得很好。

编辑：

Working example

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky" id="stickyEl">
    This is the sticky box
  </div>
</div>

stickybits('#stickyEl');

body {
  height: 1500px;
}
.flexbox-wrapper {
  display: flex;
  display: -ms-flexbox;
}
.regular {
  background-color: blue;
  height: 600px;
  -ms-flex: 1 0 auto;

}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

Answer 2

这是给 display:flex

将此样式添加到您的 flexbox-wrapper class :

.flexbox-wrapper {
      display: -ms-flexbox;
      }

然后

.regular {
    -ms-flex: 1 0 auto;
    }

flex shorthand 计算 flex-grow, flex-shrink, flex-basis

position:sticky 不能与 display:flex 在 IE 11 上一起使用

position:sticky doesn't work together with display:flex on IE 11

html

javascript

css

sticky

flexbox