created a floating header

src/app/components/stream/user-profile/user-profile.component.html

@@ -1,9 +1,17 @@
+<div class="outer-profile">
     <div class="profile flexcroll" #statusstream (scroll)="onScroll()">
+        <div class="profile__floating-header" [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}"
+            [class.profile__floating-header__activated]="showFloatingHeader">
+            <div class="profile__floating-header__inner">
+                FLOATING HEADER
+            </div>
+        </div>
+
         <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
 
         <div class="profile__moved" *ngIf="displayedAccount && displayedAccount.moved">
-        {{displayedAccount | accountEmoji }} has moved to <a href (click)="browseAccount(displayedAccount.moved.acct)"
+            {{displayedAccount | accountEmoji }} has moved to <a href
-            class="profile__moved--link"
+                (click)="browseAccount(displayedAccount.moved.acct)" class="profile__moved--link"
                 title="open @{{displayedAccount.moved.acct }}">@{{displayedAccount.moved.acct }}</a>
         </div>
 
@@ -20,7 +28,9 @@
                         title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2>
 
                 <div class="profile-header__follow" *ngIf="relationship && !displayedAccount.moved">
-                <app-waiting-animation *ngIf="loadingRelationShip" class="waiting-icon profile-header__follow--waiting"></app-waiting-animation>
+                    <app-waiting-animation *ngIf="loadingRelationShip"
+                        class="waiting-icon profile-header__follow--waiting">
+                    </app-waiting-animation>
 
                     <div *ngIf="!loadingRelationShip">
                         <button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
@@ -37,13 +47,15 @@
                         </button>
                     </div>
                 </div>
-            <div class="profile-header__state" *ngIf="relationship && !displayedAccount.moved && !loadingRelationShip">
+                <div class="profile-header__state"
+                    *ngIf="relationship && !displayedAccount.moved && !loadingRelationShip">
                     <div class="profile-header__state--data" *ngIf="relationship.followed_by">follows you</div>
                     <div class="profile-header__state--data" *ngIf="relationship.blocking">blocked</div>
                     <div class="profile-header__state--data" *ngIf="relationship.blocked_by">blocks you</div>
                     <div class="profile-header__state--data" *ngIf="relationship.domain_blocking">domain blocked</div>
                     <div class="profile-header__state--data" *ngIf="relationship.muting">muted</div>
-                <div class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications muted
+                    <div class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications
+                        muted
                     </div>
                 </div>
             </div>
@@ -57,7 +69,8 @@
             </div>
             <div class="profile-fields" *ngIf="displayedAccount && displayedAccount.fields.length > 0">
                 <div class="profile-fields__field" *ngFor="let field of displayedAccount.fields">
-                <div class="profile-fields__field--value" innerHTML="{{ displayedAccount | accountEmoji:field.value}}"
+                    <div class="profile-fields__field--value"
+                        innerHTML="{{ displayedAccount | accountEmoji:field.value}}"
                         [ngClass]="{'profile-fields__field--validated': field.verified_at }">
                     </div>
                     <div class="profile-fields__field--name">
@@ -88,3 +101,4 @@
             </div>
         </div>
     </div>
+</div>

src/app/components/stream/user-profile/user-profile.component.scss

@@ -5,11 +5,49 @@ $validated-font-color: #4fde23;
 $validated-background: #164109;
 $header-height: 160px;
 
+.outer-profile {
+    height: calc(100%);
+    overflow: hidden;
+    position: relative;
+}
+
 .profile {
     // overflow: auto;
     height: calc(100%);
     overflow: auto;
 
+    &__floating-header {
+        transition: all .2s;
+        transition-timing-function: ease-in;
+
+        height: 60px;
+        width: calc(100% - 7px);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+
+        position: absolute;
+        top: -60px;
+        z-index: 100;
+
+        border-bottom: 1px solid #222736;
+
+        // opacity: 0;
+
+        &__inner {
+            overflow: auto;
+            height: 60px;
+            background-color: rgba(0, 0, 0, .45);
+        }
+
+        &__activated {
+            // opacity: 1;
+            transition: all .25s;
+            transition-timing-function: ease-out;
+            top: 0px;
+        }
+    }
+
     &__moved {
         padding: 5px;
         text-align: center;

src/app/components/stream/user-profile/user-profile.component.ts

@@ -34,6 +34,7 @@ export class UserProfileComponent implements OnInit {
 
     isLoading: boolean;
     loadingRelationShip = false;
+    showFloatingHeader = false;
 
     private maxReached = false;
     private maxId: string;
@@ -205,6 +206,7 @@ export class UserProfileComponent implements OnInit {
     }
 
     refresh(): any {
+        this.showFloatingHeader = false;
         this.load(this.lastAccountName);
     }
 
@@ -255,6 +257,12 @@ export class UserProfileComponent implements OnInit {
         var element = this.statustream.nativeElement as HTMLElement;
         const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000;
 
+        if(element.scrollTop > 150){
+            this.showFloatingHeader = true;
+        } else {
+            this.showFloatingHeader = false;
+        }
+
         if (atBottom) {
             this.scrolledToBottom();
         }