Floating header

js/src/forum/components/DiscussionPage.js

@@ -9,6 +9,7 @@ import SplitDropdown from '../../common/components/SplitDropdown';
 import listItems from '../../common/helpers/listItems';
 import DiscussionControls from '../utils/DiscussionControls';
 import PostStreamState from '../states/PostStreamState';
+import ScrollListener from "../../common/utils/ScrollListener";
 
 /**
  * The `DiscussionPage` component displays a whole discussion page, including
@@ -51,6 +52,21 @@ export default class DiscussionPage extends Page {
     this.bodyClass = 'App--discussion';
   }
 
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    const scrollListener = new ScrollListener((top) => {
+      const $hero = $('.DiscussionHero');
+      if ($hero.offset()) {
+        $hero.toggleClass('DiscussionHero--floating', top > 92);
+        $('.DiscussionPage-discussion').children('.container').toggleClass('scrolled', top > 92);
+      }
+    });
+
+    scrollListener.start();
+    scrollListener.update();
+  }
+
   onremove() {
     super.onremove();
     // If we are indeed navigating away from this discussion, then disable the

less/forum/DiscussionHero.less

@@ -1,4 +1,7 @@
 .DiscussionHero {
+  z-index: 1;
+  .transition(all 0.4s ease);
+
   .badges {
     margin-right: 10px;
     margin-bottom: -2px;
@@ -18,3 +21,34 @@
   display: inline;
   vertical-align: middle;
 }
+
+.DiscussionHero--floating {
+  position: fixed;
+  height: 50px;
+  width: 100%;
+
+  > .container {
+    padding-top: 10px !important;
+  }
+
+  .DiscussionHero-items {
+    li {
+      vertical-align: middle;
+    }
+
+    .item-title {
+      display: inline-block;
+      margin-top: -2px;
+    }
+
+    .tooltip {
+      top: unset !important;
+      bottom: -30px;
+    }
+
+    .tooltip-arrow {
+      top: 0;
+      .scale(1, -1);
+    }
+  }
+}

less/forum/DiscussionPage.less

@@ -151,3 +151,13 @@
     }
   }
 }
+
+.DiscussionPage-discussion {
+  > .container.scrolled {
+    padding-top: ~"calc(90px + @{header-height})";
+
+    .DiscussionPage-nav {
+      margin-top: -1px;
+    }
+  }
+}