Javascript 向下滚动时设置工具栏背景颜色的动画

我有一个固定的工具栏，在我的页面顶部有一个深色的背景，下面是代码

/*html*/
登录
/*css*/
.浮动收割台div{
位置：固定；
z指数：999；
宽度：100%；
}
md工具栏{
背景色：rgb（55,58,60）；
}

我想要实现的是，当页面没有滚动时，工具栏以透明的背景色开始。（所以我只看到登录链接）

当用户向下滚动一段（超过某个部分）时，工具栏的背景色就会出现。最好是动画

---

我怎样才能做到这一点。我使用的是Angular 2，因此最好不要像使用document或jquery那样太花哨。这应该会对您有所帮助，您可能需要修改它以满足您的需要

/*for setting navigation bar colour*/
$(document).ready(function(){
    var scroll_start = 0;
    var nav_element = $(".navbar");
    var startchange = $('#my_element'); // element to start change when it reaches the top

    var nav_element_height = nav_element.outerHeight();
    var startchange_offset = startchange.offset().top;

    var offset = Math.round(startchange_offset - nav_element_height);

    $(document).scroll(function() {
        scroll_start = $(this).scrollTop();
        if(scroll_start > offset) {
            nav_element.addClass('navbar-bg-color');
        } else {
            nav_element.removeClass('navbar-bg-color');
        }
    });
});

试试这样的方法：）

app=angular.module（'myApp'，[]）；
应用程序指令（“滚动”，函数（$window）{
返回函数（范围、元素、属性）{
元素（$window）.bind（“滚动”，函数（）{
如果（this.pageYOffset>=50）{
scope.boolChangeClass=true；
}否则{
scope.boolChangeClass=false；
}
作用域：$apply（）；
});
};
});
body{边距：0；背景：浅灰色；最小高度：900px；}
.标题{
背景：透明；
高度：70像素；
填充：24px；
框大小：边框框；
位置：固定；
右：0；
左：0；
排名：0；
z指数：150；
字体：18px无衬线；
颜色：白色；
过渡期：所有.25秒放松；
}
.min.标题{高度：50px；填充：14px 24px；背景：rgb（55,58,60）；}
img{
宽度：100%；
位置：固定；
}

文件
标题
使用
（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中使用document和$，尽管看起来很不错。但我认为在angular 2中使用document和$并不推荐，因为这是一个很好的解决方案。谢谢。如果您或任何人感兴趣，我也可以从这个网站找到这个解决方案。
<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;
}

.mat-toolbar{
  -webkit-transition: background-color 400ms linear;
    -ms-transition: background-color 400ms linear;
    transition: background-color 400ms linear;
}