Merge branch '23520-mr-sticky-tabs-overlap-discussion-from-anchor' into 'master'

Account for fixed position MR when scrolling to elements

This MR accounts for the new merge request fixed affix bar when scrolling to an element on the MR page.

The fixed MR tabs bar was not being taken into account when shifting permalink scroll targets so that they are unobscured by navigation elements.

Closes #23520

See merge request !7051
Signed-off-by: Rémy Coutable <remy@rymai.me>

app/assets/javascripts/application.js

@@ -127,19 +127,30 @@
     return $(document).off('scroll');
   };
 
-  window.shiftWindow = function() {
-    return scrollBy(0, -100);
-  };
-
   document.addEventListener("page:fetch", unbindEvents);
 
-  window.addEventListener("hashchange", shiftWindow);
+  // automatically adjust scroll position for hash urls taking the height of the navbar into account
+  // https://github.com/twitter/bootstrap/issues/1768
+  window.adjustScroll = function() {
+    var navbar = document.querySelector('.navbar-gitlab');
+    var subnav = document.querySelector('.layout-nav');
+    var fixedTabs = document.querySelector('.js-tabs-affix');
+
+    adjustment = 0;
+    if (navbar) adjustment -= navbar.offsetHeight;
+    if (subnav) adjustment -= subnav.offsetHeight;
+    if (fixedTabs) adjustment -= fixedTabs.offsetHeight;
+
+    return scrollBy(0, adjustment);
+  };
+
+  window.addEventListener("hashchange", adjustScroll);
 
-  window.onload = function() {
+  window.onload = function () {
     // Scroll the window to avoid the topnav bar
     // https://github.com/twitter/bootstrap/issues/1768
     if (location.hash) {
-      return setTimeout(shiftWindow, 100);
+      return setTimeout(adjustScroll, 100);
     }
   };
 

app/assets/javascripts/merge_request_tabs.js

@@ -129,7 +129,7 @@
     MergeRequestTabs.prototype.scrollToElement = function(container) {
       var $el, navBarHeight;
       if (window.location.hash) {
-        navBarHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight();
+        navBarHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight() + document.querySelector('.js-tabs-affix').offsetHeight;
         $el = $(container + " " + window.location.hash + ":not(.match)");
         if ($el.length) {
           return $.scrollTo(container + " " + window.location.hash + ":not(.match)", {