Fixes the diff changes buttons from toggling when scrollingchanges-bar-sticky-fix

Closes #36698

4 files changed, 18 insertions, 1 deletions

diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
index ff2b66046b4..283c0ec0410 100644
--- a/app/assets/javascripts/lib/utils/sticky.js
+++ b/app/assets/javascripts/lib/utils/sticky.js
@@ -1,5 +1,5 @@
 export const isSticky = (el, scrollY, stickyTop) => {
-  const top = el.offsetTop - scrollY;
+  const top = Math.floor(el.offsetTop - scrollY);
 
   if (top <= stickyTop) {
     el.classList.add('is-stuck');
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 5a9b3d19f84..3b3620fe61b 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -253,6 +253,7 @@ import bp from './breakpoints';
 
     loadDiff(source) {
       if (this.diffsLoaded) {
+        document.dispatchEvent(new CustomEvent('scroll'));
         return;
       }
 
diff --git a/changelogs/unreleased/changes-bar-sticky-fix.yml b/changelogs/unreleased/changes-bar-sticky-fix.yml
new file mode 100644
index 00000000000..7d62773ef7a
--- /dev/null
+++ b/changelogs/unreleased/changes-bar-sticky-fix.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed diff changes bar buttons from showing/hiding whilst scrolling
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index dc40244c20e..8830a2d29e5 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -295,6 +295,17 @@ import 'vendor/jquery.scrollTo';
         this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
       });
 
+      it('triggers scroll event when diff already loaded', function () {
+        spyOn(document, 'dispatchEvent');
+
+        this.class.diffsLoaded = true;
+        this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
+
+        expect(
+          document.dispatchEvent,
+        ).toHaveBeenCalledWith(new CustomEvent('scroll'));
+      });
+
       describe('with inline diff', () => {
         let noteId;
         let noteLineNumId;