我的页面顶部有一个固定的工具栏,其背景颜色为深色,代码如下。
/*html*/
<div class="floating-header-div">
<md-toolbar>
<a>Login</a>
</md-toolbar>
</div>
/*css*/
.floating-header-div {
position: fixed;
z-index: 999;
width: 100%;
}
md-toolbar {
background-color : rgb(55,58,60);
}
我想要实现的是,当页面未滚动时,工具栏以透明背景色开始。 (所以我只看到登录链接)
随着用户向下滚动更多(经过某个部分),工具栏的背景颜色会出现。最好是动画。
我怎样才能做到这一点。我正在使用 Angular 2,所以最好不要像使用 document 或 jquery 那样花哨
最佳答案
使用 (scroll)="onScroll($event)
捕捉滚动事件并使用 @ViewChild
访问工具栏。当您的工具栏有一个简单的验证工具时透明:
<div #content class="content">
<md-toolbar class="toolbar" color="{{ setColor ? 'primary' : 'accent' }}">
<span>Login</span>
</md-toolbar>
<div class="topimage"></div>
<p>Content</p>
</div>
@ViewChild('content') content;
setColor = false;
onScroll(event) {
this.setColor = this.content.nativeElement.getBoundingClientRect().top < -64;
}
我不太擅长 Angular 2 动画,但你可以用 CSS3 来做:
.mat-toolbar{
-webkit-transition: background-color 400ms linear;
-ms-transition: background-color 400ms linear;
transition: background-color 400ms linear;
}
这是一个工作示例:https://plnkr.co/edit/emKv4YXGEGiRj8lyaWgr?p=preview
关于javascript - 向下滚动时动画工具栏背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42852880/