Merge branch 'mr-tabs-affix' into 'master'

Merge request tabs stick when scrolling page

## What does this MR do?

When scrolling merge requests this sticks the tabs to below the navigation for easy access.

## Screenshots (if relevant)

![sticky](/uploads/372a9889c50e9f85fef475cbee110ec1/sticky.gif)

## What are the relevant issue numbers?

Closes #20548

See merge request !6382

1 files changed, 41 insertions, 0 deletions

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 8045d24a1bb..fd21aa1fefa 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -71,6 +71,7 @@
       this._location = location;
       this.bindEvents();
       this.activateTab(this.opts.action);
+      this.initAffix();
     }
 
     MergeRequestTabs.prototype.bindEvents = function() {
@@ -380,6 +381,46 @@
     // Only when sidebar is collapsed
     };
 
+    MergeRequestTabs.prototype.initAffix = function () {
+      var $tabs = $('.js-tabs-affix');
+
+      // Screen space on small screens is usually very sparse
+      // So we dont affix the tabs on these
+      if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
+
+      var tabsWidth = $tabs.outerWidth(),
+        $diffTabs = $('#diff-notes-app'),
+        offsetTop = $tabs.offset().top - ($('.navbar-fixed-top').height() + $('.layout-nav').height());
+
+      $tabs.off('affix.bs.affix affix-top.bs.affix')
+        .affix({
+          offset: {
+            top: offsetTop
+          }
+        }).on('affix.bs.affix', function () {
+          $tabs.css({
+            left: $tabs.offset().left,
+            width: tabsWidth
+          });
+          $diffTabs.css({
+            marginTop: $tabs.height()
+          });
+        }).on('affix-top.bs.affix', function () {
+          $tabs.css({
+            left: '',
+            width: ''
+          });
+          $diffTabs.css({
+            marginTop: ''
+          });
+        });
+
+      // Fix bug when reloading the page already scrolling
+      if ($tabs.hasClass('affix')) {
+        $tabs.trigger('affix.bs.affix');
+      }
+    };
+
     return MergeRequestTabs;
 
   })();