make page top more dark when scroll

src/app/common/directives/scrollPosition.js

@@ -0,0 +1,23 @@
+(function(blurAdminApp) {
+  'use strict';
+
+  blurAdminApp.directive('scrollPosition', [function () {
+    return {
+      scope: {
+        scrollPosition: '=',
+        maxHeight: '=',
+      },
+      link: function (scope) {
+        $(window).on('scroll', function() {
+          var scrollTop = $(window).scrollTop() > scope.maxHeight;
+          if (scrollTop !== scope.prevScrollTop) {
+            scope.$apply(function() {
+              scope.scrollPosition = scrollTop;
+            });
+          }
+          scope.prevScrollTop = scrollTop;
+        });
+      }
+    };
+  }]);
+})(blurAdminApp);

src/app/components/pageTop/_pageTop.scss

@@ -1,5 +1,5 @@
 .page-top {
-  @include bg-translucent-dark(0.85);
+  @include bg-translucent-dark(0.5);
   position: fixed;
   z-index: 904;
   box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
@@ -7,6 +7,10 @@
   width: 100%;
   min-width: $resMin;
   padding: 0 32px 0 40px;
+
+  &.scrolled {
+    @include bg-translucent-dark(0.85);
+  }
 }
 
 a.al-logo {

src/app/components/pageTop/pageTop.html

@@ -1,4 +1,4 @@
-<div class="page-top clearfix">
+<div class="page-top clearfix" scroll-position="scrolled" max-height="50" ng-class="{'scrolled': scrolled}">
   <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>
 

src/app/pages/dashboard/widgets/blurFeed/blurFeed.js

@@ -16,7 +16,7 @@ blurAdminApp.directive('blurFeed', function () {
           type: 'video-message',
           author: 'Andrey',
           header: 'added new video',
-          text: 'Vaider and Me',
+          text: 'Vader and Me',
           preview: 'vader-and-me-preview',
           link: 'https://www.youtube.com/watch?v=IfcpzBbbamk',
           time: 'Today 9:30 pm',