angular - 在 Angular 中向下滚动时如何使组件消失？

Question

我正在寻找一种简单的方法来在正常标题向下滚动时显示不同的标题。我一直在寻找许多解决方案，但它们都涉及长代码。

所以这是我找到的解决方案，但它不起作用，因为 y 没有自行实现..

这是 typescript

import { Component, OnInit, HostListener } from '@angular/core';`

...

export class HeaderComponent implements OnInit{

    y = window.scrollY;

    myID = document.getElementById("header");

    myID2 = document.getElementById("header2");

ngOnInit() {
        this.myScrollFunc();
        window.addEventListener("scroll", this.myScrollFunc);
      }

      myScrollFunc() {
        if (this.y >= 150) {
          this.myID2.className = "bottomMenu hide"
          this.myID.className = "bottomMenu show"
        } else {
          this.myID2.className = "bottomMenu show"
          this.myID.className = "bottomMenu hide"
        }
      };

    }

HTML

<div id="header" class="bottomMenu show"> ... </div>

<div id="header2" class="bottomMenu hide"> ... </div>

和 .css

.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}

这显然应该有效并且看起来很简单，但它对我不起作用..

编辑:如果你有更简单的方法我也很开放，解决方案主要不是纠正这个问题。

编辑 2:仍然没有答案，如果有人有想法，或者如果有更简单的解决方案，比如 if (position !=0) { y = 1 } else { y = 0 } 我会在其中添加 y HTML 中的一些 ngIf... ?

编辑 3:我终于找到了解决方案，如果有人遇到同样的问题，这是我的代码:

HTML

<div id="header" *ngIf="scrolled == 0"> ... </div>
<div id="header2" *ngIf="scrolled == 1"> ... </div>

typescript

export class HeaderComponent implements OnInit{

  scrolled = 0;

  @HostListener('window:scroll', ['$event'])
  onWindowScroll($event) {
    const numb = window.scrollY;
    if (numb >= 50){
      this.scrolled = 1;
    }
    else {
      this.scrolled = 0;
    }
  }
}

比长听者容易

非常感谢您的提前帮助!

Answer 1

HTML

<div id="header" *ngIf="scrolled == 0"> ... </div>
<div id="header2" *ngIf="scrolled == 1"> ... </div>

typescript

export class HeaderComponent implements OnInit{

  scrolled = 0;

  @HostListener('window:scroll', ['$event'])
  onWindowScroll($event) {
    const numb = window.scrollY;
    if (numb >= 50){
      this.scrolled = 1;
    }
    else {
      this.scrolled = 0;
    }
  }
}

比长听者容易