Update position sticky polyfill

3 files changed, 3 insertions, 49 deletions

diff --git a/app/assets/javascripts/init_changes_dropdown.js b/app/assets/javascripts/init_changes_dropdown.js
index 09cca1dc7d9..a9f4829f980 100644
--- a/app/assets/javascripts/init_changes_dropdown.js
+++ b/app/assets/javascripts/init_changes_dropdown.js
@@ -1,8 +1,8 @@
 import $ from 'jquery';
-import stickyMonitor from './lib/utils/sticky';
+import StickyFill from 'stickyfilljs';
 
-export default (stickyTop) => {
-  stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);
+export default () => {
+  StickyFill.add(document.querySelector('.js-diff-files-changed'));
 
   $('.js-diff-stats-dropdown').glDropdown({
     filterable: true,
diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js
index 611e8200b4d..8dfe8aae5b5 100644
--- a/app/assets/javascripts/job.js
+++ b/app/assets/javascripts/job.js
@@ -80,13 +80,6 @@ export default class Job {
   }
 
   initAffixTopArea() {
-    /**
-      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 use a polyfill
-    */
-    if (this.$topBar.css('position') !== 'static') return;
-
     StickyFill.add(this.$topBar);
   }
 
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
deleted file mode 100644
index 098afcfa1b4..00000000000
--- a/app/assets/javascripts/lib/utils/sticky.js
+++ /dev/null
@@ -1,39 +0,0 @@
-export const createPlaceholder = () => {
-  const placeholder = document.createElement('div');
-  placeholder.classList.add('sticky-placeholder');
-
-  return placeholder;
-};
-
-export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
-  const top = Math.floor(el.offsetTop - scrollY);
-
-  if (top <= stickyTop && !el.classList.contains('is-stuck')) {
-    const placeholder = insertPlaceholder ? createPlaceholder() : null;
-    const heightBefore = el.offsetHeight;
-
-    el.classList.add('is-stuck');
-
-    if (insertPlaceholder) {
-      el.parentNode.insertBefore(placeholder, el.nextElementSibling);
-
-      placeholder.style.height = `${heightBefore - el.offsetHeight}px`;
-    }
-  } else if (top > stickyTop && el.classList.contains('is-stuck')) {
-    el.classList.remove('is-stuck');
-
-    if (insertPlaceholder && el.nextElementSibling && el.nextElementSibling.classList.contains('sticky-placeholder')) {
-      el.nextElementSibling.remove();
-    }
-  }
-};
-
-export default (el, stickyTop, insertPlaceholder = true) => {
-  if (!el) return;
-
-  if (typeof CSS === 'undefined' || !(CSS.supports('(position: -webkit-sticky) or (position: sticky)'))) return;
-
-  document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder), {
-    passive: true,
-  });
-};