1 files changed, 14 insertions, 1 deletions
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index cbb2ae9f1bd..33e4b7db681 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -6,7 +6,7 @@
   const sidebarBreakpoint = 1024;
 
   const pageSelector = '.page-with-sidebar';
-  const navbarSelector = '.navbar-fixed-top';
+  const navbarSelector = '.navbar-gitlab';
   const sidebarWrapperSelector = '.sidebar-wrapper';
   const sidebarContentSelector = '.nav-sidebar';
 
@@ -35,13 +35,16 @@
         window.innerWidth >= sidebarBreakpoint &&
         $(pageSelector).hasClass(expandedPageClass)
       );
+      $(window).on('resize', () => this.setSidebarHeight());
       $(document)
         .on('click', sidebarToggleSelector, () => this.toggleSidebar())
         .on('click', pinnedToggleSelector, () => this.togglePinnedState())
         .on('click', 'html, body, a, button', (e) => this.handleClickEvent(e))
         .on('DOMContentLoaded', () => this.renderState())
+        .on('scroll', () => this.setSidebarHeight())
         .on('todo:toggle', (e, count) => this.updateTodoCount(count));
       this.renderState();
+      this.setSidebarHeight();
     }
 
     handleClickEvent(e) {
@@ -64,6 +67,16 @@
       this.renderState();
     }
 
+    setSidebarHeight() {
+      const $navHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight();
+      const diff = $navHeight - $('body').scrollTop();
+      if (diff > 0) {
+        $('.js-right-sidebar').outerHeight($(window).height() - diff);
+      } else {
+        $('.js-right-sidebar').outerHeight('100%');
+      }
+    }
+
     togglePinnedState() {
       this.isPinned = !this.isPinned;
       if (!this.isPinned) {