css - 向下滚动时自动隐藏 Angular Material 工具栏(顶部导航栏)

Question

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

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

我试过使用 window.pageYOffset 但如前所述 here ，此值始终返回 0。

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

Answer 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 一起使用，但是组件的父节点必须是可滚动的(在您的示例中不是这种情况)