use sticky headers

package.json

@@ -6,8 +6,9 @@
   "dependencies": {
     "angular": "^1.5.2",
     "angular-sanitize": "^1.5.6",
-    "angular-ui-router": "^1.0.0-beta.1",
+    "angular-stickyfill": "^0.1.0",
     "angular-ui-bootstrap": "^1.3.3",
+    "angular-ui-router": "^1.0.0-beta.1",
     "autolinker": "^0.27.0",
     "babel-polyfill": "^6.9.1",
     "bootstrap": "^3.3.6",

src/app.js

@@ -1,18 +1,20 @@
 // Vendor-Imports
-import angular from 'angular';
-import uiRouter from 'angular-ui-router';
-import uiBootstrap from 'angular-ui-bootstrap';
-import 'bootstrap/dist/css/bootstrap.css';
-import 'babel-polyfill';
+import angular from "angular";
+import uiRouter from "angular-ui-router";
+import uiBootstrap from "angular-ui-bootstrap";
+import "bootstrap/dist/css/bootstrap.css";
+import "babel-polyfill";
+import angularStickyfill from "angular-stickyfill";
+import "angular-stickyfill/dist/angular-stickyfill.css";
+import Mailbox from "./mailbox/mailbox";
 
 // Interne Modul-Imports
-import Mailbox from './mailbox/mailbox';
 
 angular.module('app', [
-    uiRouter, uiBootstrap, Mailbox.name
+    uiRouter, uiBootstrap, Mailbox.name, angularStickyfill
 ])
 
     .constant('config', {
-        'backend_url': './backend.php',
+        'backend_url': 'http://dubgo.com/m2/backend.php',
         'reload_interval_ms': 10000
     })

src/mailbox/mail/mail.html

@@ -1,5 +1,5 @@
 <section class="email">
-    <div class="row ">
+    <div class="row sticky-header" ec-stickyfill>
         <div class="col-sm-12 email-summary">{{$ctrl.mail.subject}}</div>
     </div>
 

src/mailbox/mail/mail.scss

@@ -6,6 +6,11 @@ $tab-button-color: white;
 $tab-button-color-inactive: #e0e0e0;
 $tab-content-background: white;
 
+.sticky-header {
+  top: 0;
+  z-index: 1000;
+}
+
 .email {
   .email-summary {
     font-weight: bold;