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

Question

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

所以这是我找到的解决方案，但是由于y没有实现自身，因此无法正常工作。

这里是打字稿

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

这显然应该可以正常工作，看起来很简单，但对我却不起作用。

编辑：如果您也有一种更简单的方法，我也很开放，那么解决方案并不是主要是要纠正这一问题。

非常感谢您的提前帮助！

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

Answer 1

我已更新您的代码，请尝试此。

Answer 2

[如果您使用的是角形并且要隐藏某些元素，则只需使用*ngIF即可显示或不显示该元素，并且无需应用css来隐藏它，并且由于您只显示一个元素或另一个，可以将两个都绑定到相同的变量，但条件相反。