Hintergrundfarbe der Symbolleiste beim Scrollen nach unten

Ich habe eine feste Symbolleiste mit einer dunklen Hintergrundfarbe oben auf meiner Seite mit dem folgenden Code.Hintergrundfarbe der Symbolleiste beim Scrollen nach unten

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

Was ich, dass die Werkzeugleiste mit transparentem Hintergrund Farbe beginnt erreichen wollen, ist, wenn die Seite nicht gescrollt wird. (So sehe ich nur den Login-Link)

Während der Benutzer scrollen mehr ab (über einen bestimmten Abschnitt), wird die Hintergrundfarbe der Symbolleiste angezeigt. Vorzugsweise animiert.

Wie kann ich dies erreichen? Ich benutze Angular 2 so vorzugsweise nichts zu ausgefallen wie die Verwendung von Dokument oder Jquery

Quelle

2017-03-17 ErnieKev

Verwenden :) (scroll)="onScroll($event) das Scroll-Ereignis zu fangen und mit @ViewChild Zugriff auf die Symbolleiste. Mit einer einfachen Validierung toogle wenn die Symbolleiste transparent sein muss:

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

Ich bin nicht sehr gut mit kantigen 2 Animationen aber man kann es mit CSS3 tun:

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

Hier ist ein funktionierendes Beispiel: https://plnkr.co/edit/emKv4YXGEGiRj8lyaWgr?p=preview

Quelle

2017-03-17 11:53:08

Große Lösung. Vielen Dank. Ich habe diese Lösung auch von dieser Website gefunden, wenn Sie oder jemand interessiert sind. http://www.route2it.com/uncategorized/creating-an-animated-header-with-angular-2/ – ErnieKev

Vielen Dank für die Weitergabe :) Mit Direktive sieht gut aus :) –

Dies sollte Ihnen helfen, müssen Sie möglicherweise dies an Ihre Bedürfnisse anzupassen.

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

Quelle

2017-03-17 08:54:42

Ich denke, mit Dokument und $ in Winkel 2 wird nicht empfohlen, obwohl – ErnieKev

Versuchen Sie so etwas wie dieses

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>

Quelle

2017-03-17 09:16:34

Sieht süß aus. Aber ich denke, die Verwendung von Dokument und $ in Winkel 2 wird nicht empfohlen, obwohl – ErnieKev

Hintergrundfarbe der Symbolleiste beim Scrollen nach unten

Antwort

Verwandte Themen