IE中的粘性标头

Question

我在Angular 4中有一个项目，我需要做粘性标头。当我使用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查看，而在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 px），所以这就是为什么看到闪烁。 有人可以解释我是否正确吗？如果是事实，我该怎么做才对？

Answer 1

除了身高，其他一切都还可以。我必须为mydiv设置高度，它才有效。