diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts
index 47f5a943..7229fc1f 100644
--- a/dashboard/sharedComponents/page-content/page-content.component.ts
+++ b/dashboard/sharedComponents/page-content/page-content.component.ts
@@ -1,24 +1,78 @@
-import {Component, OnInit} from "@angular/core";
+import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
+import {Subscription} from "rxjs";
+
+declare var UIkit;
 
 @Component({
   selector: '[page-content]',
   template: `
-  <div id="page_content">
-    <div #header id="page_content_header" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; media: @m" [attr.offset]="offset">
-      <div class="uk-container uk-container-large uk-padding-remove-vertical">
-        <ng-content select="[header]"></ng-content>
+    <div id="page_content" [class.sticky]="sticky">
+      <div #header id="page_content_header">
+        <div class="uk-container uk-container-large uk-padding-remove-vertical">
+          <ng-content select="[header]"></ng-content>
+        </div>
+      </div>
+      <div id="page_content_inner" [class.sticky]="sticky" class="uk-section uk-container uk-container-large">
+        <ng-content select="[inner]"></ng-content>
       </div>
     </div>
-    <div id="page_content_inner" class="uk-section uk-container uk-container-large">
-      <ng-content select="[inner]"></ng-content>
-    </div>
-  </div>
   `
 })
-export class PageContentComponent implements OnInit{
-  public offset: string;
+export class PageContentComponent implements OnInit, OnDestroy {
+  private current;
+  private shouldSticky: boolean = false;
+  public offset: number;
+  public sticky: boolean = false;
+  @Output()
+  public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @ViewChild("header") public header: ElementRef;
+  private subscriptions: any[] = [];
+  
+  constructor() {
+  }
+  
+  @HostListener('window:scroll', ['$event.target']) // for window scroll events
+  scroll(e) {
+    let scroll = window.pageYOffset;
+    let previous = this.offset;
+    if (scroll > this.current) {
+      this.offset = 0;
+    } else {
+      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height') + 1);
+    }
+    if (this.offset !== previous) {
+      UIkit.sticky(this.header.nativeElement, {
+        offset: this.offset
+      });
+    }
+    this.current = scroll;
+    if(this.current > this.header.nativeElement.offsetTop + this.header.nativeElement.offsetHeight && this.shouldSticky) {
+      this.sticky = true;
+      this.stickyEmitter.emit(this.sticky);
+    }
+  }
   
   ngOnInit() {
-    this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
+    if (typeof window !== "undefined") {
+      this.current = window.pageYOffset;
+    }
+    this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
+      this.shouldSticky = true;
+    }));
+    this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', (): void => {
+      this.sticky = false;
+      this.shouldSticky = false;
+      this.stickyEmitter.emit(this.sticky);
+    }));
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      } else if (subscription instanceof Function) {
+        subscription();
+      }
+    });
   }
 }