javascript - 向下滚动时动画工具栏背景颜色

Question

我的页面顶部有一个固定的工具栏，其背景颜色为深色，代码如下。

/*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 那样花哨

Answer 1

使用 (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