diff --git a/reviewboard/static/rb/css/reviews.less b/reviewboard/static/rb/css/reviews.less
index 82437403f2d73c1d24c2abfc69fea75d2a6881d9..75fac1c76683bbef16fff2eab3f72298ca16e361 100644
--- a/reviewboard/static/rb/css/reviews.less
+++ b/reviewboard/static/rb/css/reviews.less
@@ -531,6 +531,7 @@
     margin-top: 10px;
 
     &.floating {
+      border-top: 0;
       margin-top: 0;
     }
   }
diff --git a/reviewboard/static/rb/js/views/floatingBannerView.js b/reviewboard/static/rb/js/views/floatingBannerView.js
index 1f1a335b1cd86d010fabdb10d213dcfa6edc5420..c36e9b9179b30129fef1d54fd97b441dfd29084a 100644
--- a/reviewboard/static/rb/js/views/floatingBannerView.js
+++ b/reviewboard/static/rb/js/views/floatingBannerView.js
@@ -48,6 +48,9 @@ RB.FloatingBannerView = Backbone.View.extend({
     _updateFloatPosition: function() {
         var $container,
             containerTop,
+            containerBottom,
+            containerHeight,
+            wasFloating,
             windowTop,
             topOffset,
             outerHeight;
@@ -72,30 +75,65 @@ RB.FloatingBannerView = Backbone.View.extend({
         $container = this.options.$floatContainer;
 
         containerTop = $container.offset().top;
+        containerHeight = $container.outerHeight();
+        containerBottom = containerTop + containerHeight;
         windowTop = $(window).scrollTop();
         topOffset = this._$floatSpacer.offset().top - windowTop;
-        outerHeight = this.$el.outerHeight();
+        outerHeight = this.$el.outerHeight(true);
+
+        wasFloating = this.$el.hasClass('floating');
 
         if (!$container.hasClass(this.options.noFloatContainerClass) &&
             topOffset < 0 &&
             containerTop < windowTop &&
-            windowTop < (containerTop + $container.outerHeight() -
-                         outerHeight)) {
-            this.$el
-                .addClass('floating')
-                .css({
-                    top: 0,
-                    position: 'fixed'
-                });
+            windowTop < containerBottom) {
+            /*
+             * We're floating! If we just entered this state, set the
+             * appropriate styles on the element.
+             *
+             * We'll then want to set the top to 0, unless the user is
+             * scrolling the banner out of view. In that case, figure out how
+             * much to show, and set the appropriate offset.
+             */
+            if (!wasFloating) {
+                /*
+                 * Set the spacer to be the dimensions of the docked banner,
+                 * so that the container doesn't change sizes when we go into
+                 * float mode.
+                 */
+                this._$floatSpacer
+                    .height(this.$el.outerHeight())
+                    .css({
+                        'margin-top': this.$el.css('margin-top'),
+                        'margin-bottom': this.$el.css('margin-bottom'),
+                    });
+
+                this.$el
+                    .addClass('floating')
+                    .css('position', 'fixed');
+            }
+
+            this.$el.css('top',
+                         windowTop > containerBottom - outerHeight
+                         ? containerBottom - outerHeight - windowTop
+                         : 0);
 
             this._updateSize();
-        } else {
+        } else if (wasFloating) {
+            /*
+             * We're now longer floating. Unset the styles on the banner and
+             * on the spacer (in order to prevent the spacer from taking up
+             * any additional room.
+             */
             this.$el
                 .removeClass('floating')
                 .css({
                     top: '',
                     position: ''
                 });
+            this._$floatSpacer
+                .height('auto')
+                .css('margin', 0);
         }
     }
 });