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);
}

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

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

我怎样才能做到这一点。我正在使用Angular 2，因此最好不要像使用document或jquery那样过于花哨

Answer 1

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

我对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

Answer 2

这应该对您有所帮助，您可能需要对其进行修改以满足您的需求。

/*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');
        }
    });
});

Answer 3

试试这样的东西:)

＆＃13;

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();
        });
    };
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: