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

时间:2019-03-26 13:33:37

标签: css angular typescript user-experience

我目前有一个使用标准工具栏作为顶部导航的Angular应用程序。 picture of top part of my web app

现在,我希望导航栏在用户向下滚动时向上滚动,而在用户向上滚动时重新出现。

我尝试使用window.pageYOffset,但正如提到的here一样,此值始终返回0

我已经用导航栏here的当前设置进行了Stackblitz。

2 个答案:

答案 0 :(得分:0)

无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一起使用,但是组件的父节点必须是可滚动的(在您的示例中情况并非如此)

答案 1 :(得分:0)

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