html - IE 中的粘性 header

Question

我在 Angular 4 中有一个元素，我需要做一个粘性 header 。当我使用 position: sticky 时一切正常，但 sticky 在 IE 上不起作用。

1.) 我用好的方法创建了组件(我知道我可以简化 if 循环，但现在这并不重要):

@HostListener('window:scroll', ['$event'])
  checkScroll() {
    if(window.pageYOffset >= 200){
      this.isSticky = true;
      this.isNonSticky = false;
    }
    if(window.pageYOffset < 200){
      this.isSticky = false;
      this.isNonSticky = true;
    }
  }

2.) 我在 html 中有不同 div 的 View ，我有一个带有 ngClass 的 div:

[ngClass]="{ 'summary-row': isNonSticky, 'sticky' : isSticky}"

当 window.pageYOffset 大于或等于 200 像素时，它应该是粘性的。

3.) 我的 div 也有一个像下面这样的 CSS:

.summary-row {
  display: flex;
  padding: 0 30px;
  padding-right: 100px;
}

.sticky {
  position: fixed;
  background-color: brown;
  top: 70px;
  left: 0px;
  width: 100%;
}

当我向下滚动时，我看到我的粘性标题，但他在眨眼。我有一些理论，但我不知道我是否正确。

这个 div 位于中间，如下所示:

当我设置 position: fixed; 时，我知道这个元素已从正常文档流中删除 MDN所以我认为因为我有不同的 pageYOffset(小于 200 像素)所以这就是我看到闪烁的原因。如果我是对的，有人可以解释吗？如果这是真的，我该怎么做才能正确地做到这一点？

Answer 1

除了高度，一切都很好。我必须为 mydiv 设置高度，它起作用了。