FEATURE: overlay the banner when reading a topic

app/assets/javascripts/discourse/templates/components/discourse-banner.js.handlebars

@@ -1,5 +1,5 @@
 {{#if visible}}
-  <div id="banner">
+  <div id="banner" {{bind-attr class="overlay"}}>
     <div id="banner-content">
       <div class="close" {{action dismiss}}><i class="fa fa-times" title="{{i18n banner.close}}"></i></div>
       {{{banner.html}}}

app/assets/javascripts/discourse/templates/topic.js.handlebars

@@ -1,7 +1,7 @@
 <div class='container'>
   {{custom-html "top"}}
   {{Discourse.globalNotice}}
-  {{discourse-banner user=currentUser banner=Discourse.banner}}
+  {{discourse-banner user=currentUser banner=Discourse.banner overlay=view.hasScrolled}}
 </div>
 
 {{#if postStream.loaded}}

app/assets/javascripts/discourse/views/topic_view.js

@@ -115,6 +115,9 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
     this.set('docAt', false);
   },
 
+  offset: 0,
+  hasScrolled: Em.computed.gt("offset", 0),
+
   /**
     The user has scrolled the window, or it is finished rendering and ready for processing.
 
@@ -129,6 +132,8 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
       }
     }
 
+    this.set("offset", offset);
+
     var headerController = this.get('controller.controllers.header'),
         topic = this.get('controller.model');
     if (this.get('docAt')) {
@@ -138,7 +143,7 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
     }
 
     // Trigger a scrolled event
-    this.appEvents.trigger('topic:scrolled');
+    this.appEvents.trigger('topic:scrolled', offset);
   },
 
   topicTrackingState: function() {

app/assets/stylesheets/common/components/banner.css.scss

@@ -8,6 +8,12 @@
   border-radius: 5px;
   background: scale-color($tertiary, $lightness: 90%);
   @include box-shadow(0 1px 2px scale-color($tertiary, $lightness: 70%));
+  max-width: 1090px;
+  z-index: 501;
+
+  &.overlay {
+    position: fixed;
+  }
 
   .close {
     font-size: 25px !important;