我目前有一个Angular应用程序,它使用标准工具栏作为顶部导航。
现在我希望导航栏在用户向下滚动时向上滚动,并在向上滚动时重新出现。
我尝试过使用window.pageYOffset
,但正如提到的here,这个值总是返回0
。
我用我当前的导航栏here设置了Stackblitz。
没有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,但组件的父节点必须是可滚动的(在您的示例中不是这种情况)