Merge branch 'mr-tabs-sticky-poc' into 'master'

POC: Use position sticky on merge request tabs

See merge request !11289
Former-commit-id: 92bf7dfc

app/assets/javascripts/merge_request_tabs.js

@@ -358,6 +358,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
       // So we dont affix the tabs on these
       if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
+      /**
+        If the browser does not support position sticky, it returns the position as static.
+        If the browser does support sticky, then we allow the browser to handle it, if not
+        then we default back to Bootstraps affix
+      **/
+      if ($tabs.css('position') !== 'static') return;
+
       const $diffTabs = $('#diff-notes-app');
       $tabs.off('affix.bs.affix affix-top.bs.affix')

app/assets/stylesheets/pages/merge_requests.scss

@@ -693,12 +693,17 @@
 }
 .merge-request-tabs-holder {
+  top: 0;
+  z-index: 10;
   background-color: $white-light;
+  @media(min-width: $screen-sm-min) {
+    position: sticky;
+    position: -webkit-sticky;
+  }
+
   &.affix {
-    top: 0;
     left: 0;
-    z-index: 10;
     transition: right .15s;
     @media (max-width: $screen-xs-max) {