diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-26 11:09:42 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-26 11:09:42 +0000 |
commit | b187a3f2bb00a0a0a6e5f8369edf2d6430a7af6e (patch) | |
tree | 11ddca31b8a436d92522fd5be4c868c5d4076933 /app/assets/javascripts | |
parent | 178ae69b80d5ac89a5031fa95e682e58db6689ff (diff) | |
parent | 1544bc32283d791a5094a6eedc0df344462e2c31 (diff) | |
download | gitlab-ce-b187a3f2bb00a0a0a6e5f8369edf2d6430a7af6e.tar.gz |
Merge branch 'changes-bar-dynamic-placeholder' into 'master'
Dynamically create offset for sticky bar
See merge request gitlab-org/gitlab-ce!14280
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/lib/utils/sticky.js | 30 |
1 files changed, 25 insertions, 5 deletions
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js index 283c0ec0410..64db42701ce 100644 --- a/app/assets/javascripts/lib/utils/sticky.js +++ b/app/assets/javascripts/lib/utils/sticky.js @@ -1,14 +1,34 @@ -export const isSticky = (el, scrollY, stickyTop) => { +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) { + if (top <= stickyTop && !el.classList.contains('is-stuck')) { + const placeholder = insertPlaceholder ? createPlaceholder() : null; + const heightBefore = el.offsetHeight; + el.classList.add('is-stuck'); - } else { + + 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) => { +export default (el, insertPlaceholder = true) => { if (!el) return; const computedStyle = window.getComputedStyle(el); @@ -17,7 +37,7 @@ export default (el) => { const stickyTop = parseInt(computedStyle.top, 10); - document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop), { + document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder), { passive: true, }); }; |