diff --git a/src/app/theme/directives/index.ts b/src/app/theme/directives/index.ts
new file mode 100644
index 00000000..bd964aea
--- /dev/null
+++ b/src/app/theme/directives/index.ts
@@ -0,0 +1 @@
+export * from './scrollPosition.directive';
\ No newline at end of file
diff --git a/src/app/theme/directives/scrollPosition.directive.ts b/src/app/theme/directives/scrollPosition.directive.ts
new file mode 100644
index 00000000..6417d8bc
--- /dev/null
+++ b/src/app/theme/directives/scrollPosition.directive.ts
@@ -0,0 +1,23 @@
+import {Directive, Input, Output, EventEmitter, HostListener, ElementRef} from 'angular2/core';
+@Directive({
+    selector: '[scrollPosition]'
+})
+export class ScrollPosition {
+    @Input() maxHeight: Number;
+    @Output() scrollChange:EventEmitter<Boolean> = new EventEmitter<Boolean>();
+
+    private _isScrolled: Boolean;
+
+    ngOnInit() {
+        this.onWindowScroll();
+    }
+
+    @HostListener('window:scroll')
+    onWindowScroll() : void {
+        let isScrolled = window.scrollY > this.maxHeight;
+        if (isScrolled !== this._isScrolled) {
+            this._isScrolled = isScrolled;
+            this.scrollChange.emit(isScrolled);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/theme/pageTop/pageTop.component.ts b/src/app/theme/pageTop/pageTop.component.ts
index 77ba7b7c..6eb5ecd8 100644
--- a/src/app/theme/pageTop/pageTop.component.ts
+++ b/src/app/theme/pageTop/pageTop.component.ts
@@ -2,12 +2,19 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 
 import {MsgCenter} from '../msgCenter';
 import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe';
+import {ScrollPosition} from '../directives/scrollPosition.directive';
 
 @Component({
     selector: 'page-top',
     styles: [ require('./pageTop.scss') ],
     template: require('./pageTop.html'),
-    directives: [MsgCenter],
+    directives: [MsgCenter, ScrollPosition],
     pipes: [ProfilePicturePipe]
 })
-export class PageTop {}
+export class PageTop {
+    isScrolled: Boolean = false;
+
+    scrolledChanged(isScrolled) {
+        this.isScrolled = isScrolled;
+    }
+}
diff --git a/src/app/theme/pageTop/pageTop.html b/src/app/theme/pageTop/pageTop.html
index c90e9544..5f4b5fdf 100644
--- a/src/app/theme/pageTop/pageTop.html
+++ b/src/app/theme/pageTop/pageTop.html
@@ -1,4 +1,4 @@
-<div class="page-top clearfix" scroll-position="scrolled" max-height="50" ng-class="{'scrolled': scrolled}">
+<div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)" [ngClass]="{scrolled: isScrolled}">
     <a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
     <a href class="collapse-menu-link ion-navicon" ng-click="isMenuCollapsed=!isMenuCollapsed"></a>