向下滾動時動畫工具欄的背景顏色

我有一個固定的工具欄，在我的頁面頂部有一個黑色背景色，代碼如下。向下滾動時動畫工具欄的背景顏色

/*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，所以最好不要使用文檔或jQuery文件。請使用文檔或jquery

來源

2017-03-17 ErnieKev

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

我不是很好的角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

來源

2017-03-17 11:53:08

偉大的解決方案。謝謝。如果您或任何人有興趣，我也從這個網站找到了這個解決方案。 http://www.route2it.com/uncategorized/creating-an-animated-header-with-angular-2/ – ErnieKev

謝謝分享:)指令看起來不錯:) –

這應該對你有所幫助，你可能需要修改它來滿足你的需求。

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

來源

2017-03-17 08:54:42

我認爲使用文件和$角2是不推薦，雖然 – ErnieKev

嘗試這樣的事情:)

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> \t 
 
    </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>

來源

2017-03-17 09:16:34

看起來很甜。但我認爲使用文檔和$角2是不推薦，但 – ErnieKev

向下滾動時動畫工具欄的背景顏色

回答

相關問題