Remove useless transition

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,26 @@ 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()) {
+        const container = $('.DiscussionHero').children('.container');
+        const containerPadding = parseInt(container.css('padding-top')) + parseInt(container.css('padding-bottom'));
+
+        $hero.toggleClass('DiscussionHero--floating', top > 22 + containerPadding);
+        $('.DiscussionPage-discussion')
+          .children('.container')
+          .toggleClass('scrolled', top > 22 + containerPadding);
+      }
+    });
+
+    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,6 @@
 .DiscussionHero {
+  z-index: 1;
+
   .badges {
     margin-right: 10px;
     margin-bottom: -2px;
@@ -18,3 +20,42 @@
   display: inline;
   vertical-align: middle;
 }
+
+.DiscussionHero--floating {
+  position: fixed;
+  width: 100%;
+  .box-shadow(0 1px 6px @shadow-color);
+
+  @media @desktop-up {
+    height: 50px;
+  }
+
+  @media (max-width: @screen-tablet-max) {
+    height: 40px;
+  }
+
+  > .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,21 @@
     }
   }
 }
+
+.DiscussionPage-discussion {
+  @media @desktop-up {
+    .container.scrolled {
+      padding-top: ~"calc(90px + @{header-height})";
+    }
+  }
+
+  @media (max-width: @screen-tablet-max) {
+    .container.scrolled {
+      padding-top: ~"calc(50px + @{header-height})";
+    }
+  }
+
+    .DiscussionPage-nav {
+      margin-top: -1px;
+    }
+}