向下滚动时自动隐藏 Angular Material 工具栏（顶部导航栏）答案

【问题标题】：Auto hide Angular Material toolbar (top navigation bar) on scroll down向下滚动时自动隐藏 Angular Material 工具栏（顶部导航栏）
【发布时间】：2019-03-26 13:33:37
【问题描述】：

我目前有一个使用标准工具栏作为顶部导航的 Angular 应用程序。

现在我希望导航栏在用户向下滚动时与用户一起向上滚动，并在用户向上滚动时重新出现。

我尝试过使用window.pageYOffset，但正如提到的here，这个值总是返回0。

我用我当前的设置为我的导航栏here 做了一个 Stackblitz。

【问题讨论】：

标签： css angular typescript user-experience

【解决方案1】：

无 JS 方式

您只能使用 CSS 来实现这一目标。这将在您开始滚动时逐渐隐藏导航栏。

.exemple-toolbar {
  position: sticky;
  top: -200px;
  padding-top: 200px;
  height: 250px;
}

onScroll 方式

在你的容器 div 上设置一个滚动监听器，并根据滚动方向向导航栏添加一个类。

scrollTop = 0;
hideNav = false;

onScroll(event) {
  this.hideNav = this.scrollTop < event.target.scrollTop;
  this.scrollTop = event.target.scrollTop;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.nav {
  position: fixed;
  height: 50px;
  display: flex;
}

.nav.hide-nav {
  display: none; /* You can play on opacity for nice transitions*/
}

<div class="container" (scroll)="onScroll($event)">

  <div class="nav" [class.hide-nav]="hideNav">
     <!-- Nav -->
  </div>

<!--content-->

</div>

这也可以与 HostListener 一起使用，但组件的父节点必须是可滚动的（在您的示例中不是这种情况）

【讨论】：

【解决方案2】：

你可以看看这个，这是我找到的一个最好的例子 - https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3

【讨论】：