Merge branch '46833-sticky-polyfill' into 'master'

Update position sticky polyfill

Closes #46833

See merge request gitlab-org/gitlab-ce!19304

app/assets/javascripts/init_changes_dropdown.js

 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,

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);
   }
 

app/assets/javascripts/lib/utils/sticky.js

-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,
-  });
-};

spec/javascripts/lib/utils/sticky_spec.js

-import { isSticky } from '~/lib/utils/sticky';
-
-describe('sticky', () => {
-  let el;
-
-  beforeEach(() => {
-    document.body.innerHTML += `
-      <div class="parent">
-        <div id="js-sticky"></div>
-      </div>
-    `;
-
-    el = document.getElementById('js-sticky');
-  });
-
-  afterEach(() => {
-    el.parentNode.remove();
-  });
-
-  describe('when stuck', () => {
-    it('does not remove is-stuck class', () => {
-      isSticky(el, 0, el.offsetTop);
-      isSticky(el, 0, el.offsetTop);
-
-      expect(
-        el.classList.contains('is-stuck'),
-      ).toBeTruthy();
-    });
-
-    it('adds is-stuck class', () => {
-      isSticky(el, 0, el.offsetTop);
-
-      expect(
-        el.classList.contains('is-stuck'),
-      ).toBeTruthy();
-    });
-
-    it('inserts placeholder element', () => {
-      isSticky(el, 0, el.offsetTop, true);
-
-      expect(
-        document.querySelector('.sticky-placeholder'),
-      ).not.toBeNull();
-    });
-  });
-
-  describe('when not stuck', () => {
-    it('removes is-stuck class', () => {
-      spyOn(el.classList, 'remove').and.callThrough();
-
-      isSticky(el, 0, el.offsetTop);
-      isSticky(el, 0, 0);
-
-      expect(
-        el.classList.remove,
-      ).toHaveBeenCalledWith('is-stuck');
-      expect(
-        el.classList.contains('is-stuck'),
-      ).toBeFalsy();
-    });
-
-    it('does not add is-stuck class', () => {
-      isSticky(el, 0, 0);
-
-      expect(
-        el.classList.contains('is-stuck'),
-      ).toBeFalsy();
-    });
-
-    it('removes placeholder', () => {
-      isSticky(el, 0, el.offsetTop, true);
-      isSticky(el, 0, 0, true);
-
-      expect(
-        document.querySelector('.sticky-placeholder'),
-      ).toBeNull();
-    });
-  });
-});