如何在angular2中滚动时创建向下滑动菜单栏

我想在angular2中创建一个向下滑动的导航栏，这样，如果向下滚动，菜单就会消失，然后向上滚动，菜单栏就会重新出现

<div class="nav-bar>
  <a href="#">Hello</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

---

创建mavigation项目模型

export class Navigation {
 id: number;
 title: string;
 displayed: boolean;
 url: string;
}

之后，您有两个选项，从DB提供服务，或者基于模型创建新的itemn

主类中的第二个选项：

nav[]: Navigation[] = [];

constructor(public navigation: Navigation) {
let navigationHome = new Navigation(); 
navigationHome = {
 id:1,
 title: "home",
 displayed: true,
 url: "/home"
}
  [...]


this.nav.push(navigationHome, [...])
}

并在HTML中显示，在路由器HTML中。我是这样做的，但我是从db跨订阅服务的。
这是我在javascript中所做的一个例子[]