diff --git a/js/src/forum/components/DiscussionPage.js b/js/src/forum/components/DiscussionPage.js index 80dd5e8e0..17c57de7a 100644 --- a/js/src/forum/components/DiscussionPage.js +++ b/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 diff --git a/less/forum/DiscussionHero.less b/less/forum/DiscussionHero.less index 996a71b93..3d8e06df5 100644 --- a/less/forum/DiscussionHero.less +++ b/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); + } + } +} diff --git a/less/forum/DiscussionPage.less b/less/forum/DiscussionPage.less index 391869a88..2e38024b0 100644 --- a/less/forum/DiscussionPage.less +++ b/less/forum/DiscussionPage.less @@ -151,3 +151,13 @@ } } } + +.DiscussionPage-discussion { + > .container.scrolled { + padding-top: ~"calc(90px + @{header-height})"; + + .DiscussionPage-nav { + margin-top: -1px; + } + } +}