向下滚动时动画工具栏的背景颜色
[英]Animate toolbar background colour when scrolled down
问题描述
I have a fixed tool bar with a dark background colour on top of my page with the following code. 
我的页面上方有一个固定的工具栏，其背景为深色，并带有以下代码。
/*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);
}
What I want to achieve is that the tool bar starts off with transparent background colour when the page is not scrolled. 我要实现的是，当页面不滚动时，工具栏以透明的背景色开始。 (So I only see the login link) （所以我只看到登录链接）
As the user scroll down abit more (past a certain section), the background color of the toolbar appears. 当用户进一步向下滚动（通过特定部分）时，工具栏的背景颜色出现。 Preferably animated. 最好是动画。
How can I achieve this. 我该如何实现。 I am using Angular 2 so preferably nothing too fancy like using document or jquery 我正在使用Angular 2，因此最好不要像使用文档或jquery那样花哨
3 个解决方案
解决方案1
1 已采纳 2017-03-17 11:53:08
Use (scroll)="onScroll($event) to catch the scroll event and with @ViewChild access the toolbar. With a simple validation toogle when your toolbar has to be transparent: 使用(scroll)="onScroll($event)捕获滚动事件，并通过@ViewChild访问工具栏。当工具栏必须透明时，使用简单的验证toogle：
<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;
}
I am not very good with Angular 2 animations but you can do it with CSS3: 我对Angular 2动画不是很好，但是可以使用CSS3做到这一点：
.mat-toolbar{
-webkit-transition: background-color 400ms linear;
-ms-transition: background-color 400ms linear;
transition: background-color 400ms linear;
}
Here is a working example: https://plnkr.co/edit/emKv4YXGEGiRj8lyaWgr?p=preview 这是一个工作示例： https : //plnkr.co/edit/emKv4YXGEGiRj8lyaWgr?p=preview
解决方案2
0 2017-03-17 08:54:42
this should help you, you may need to modify this to suit your needs. 这将为您提供帮助，您可能需要对其进行修改以适合您的需求。
/*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');
}
});
});
解决方案3
0 2017-03-17 09:16:34
Try something like this :) 试试这样的东西:)
app = angular.module('myApp', []); app.directive("scroll", function ($window) { return function(scope, element, attrs) { angular.element($window).bind("scroll", function() { if (this.pageYOffset >= 50) { scope.boolChangeClass = true; } else { scope.boolChangeClass = false; } scope.$apply(); }); }; });
body { margin: 0; background: lightgrey; min-height: 900px;} .header { background: transparent; height: 70px; padding: 24px; box-sizing: border-box; position: fixed; right: 0; left: 0; top: 0; z-index: 150; font: 18px sans-serif; color: white; transition: all .25s ease-out; } .min .header { height: 50px; padding: 14px 24px; background: rgb(55,58,60);} img{ width: 100%; position: fixed; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body ng-app="myApp" scroll id="page" ng-class="{min:boolChangeClass}"> <div class="header">Header Title</div> <div class="content"> <img src="https://images.pexels.com/photos/115045/pexels-photo-115045.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.