diff --git a/packages/ui-default/components/sticky/sticky.page.js b/packages/ui-default/components/sticky/sticky.page.js index 3ea559873..f08b664b7 100644 --- a/packages/ui-default/components/sticky/sticky.page.js +++ b/packages/ui-default/components/sticky/sticky.page.js @@ -4,10 +4,6 @@ import responsiveCutoff from 'vj/breakpoints.json'; import { AutoloadPage } from 'vj/misc/Page'; import { isAbove, isBelow } from 'vj/utils/mediaQuery'; -const navHeight = isBelow(responsiveCutoff.mobile) - ? 0 - : $('.nav').height(); - function getCutoff(str) { if (str === 'medium') return responsiveCutoff.mobile; if (str === 'large') return responsiveCutoff.desktop; @@ -15,15 +11,21 @@ function getCutoff(str) { } function updateStickies($stickies) { + const navHeight = isBelow(responsiveCutoff.mobile) ? 0 : ($('.nav').height() || 0); $stickies.get().forEach((element) => { const $sticky = $(element); const shouldEnableSticky = isAbove($sticky.data('sticky-cutoff-min')); + const topOffset = 10 + navHeight; if (shouldEnableSticky) { element.style.position = 'sticky'; - element.style.top = `${10 + navHeight}px`; + element.style.top = `${topOffset}px`; + element.style.maxHeight = `calc(100vh - ${topOffset + 10}px)`; + element.style.overflowY = 'auto'; } else { element.style.position = ''; element.style.top = ''; + element.style.maxHeight = ''; + element.style.overflowY = ''; } }); } diff --git a/packages/ui-default/components/table/StyledTable.js b/packages/ui-default/components/table/StyledTable.js index 6e9baeaff..576effe32 100644 --- a/packages/ui-default/components/table/StyledTable.js +++ b/packages/ui-default/components/table/StyledTable.js @@ -5,7 +5,7 @@ import { isBelow } from 'vj/utils/mediaQuery'; const navHeight = isBelow(responsiveCutoff.mobile) ? 0 - : $('.nav').height(); + : ($('.nav').height() || 0); export default class StyledTable extends DOMAttachedObject { static DOMAttachKey = 'vjStyledTableInstance'; @@ -13,13 +13,20 @@ export default class StyledTable extends DOMAttachedObject { static DOMAttachSelector = '.data-table'; constructor($dom) { - if ($dom.closest('.section__body').length === 0) { + const $body = $dom.closest('.section__body'); + if ($body.length === 0) { super(null); return; } super($dom); + // Scroll container only wraps the data table + this.$container = $('
').addClass('section__table-container'); + this.$container.insertBefore(this.$dom); + this.$container.append(this.$dom); + + if ($body[0].style.overflow === 'hidden') return; // Sentinel to detect when header becomes stuck this.$sentinel = $('
').css({ height: 0, margin: 0, padding: 0 }); @@ -31,12 +38,8 @@ export default class StyledTable extends DOMAttachedObject { top: `${navHeight}px`, }); - // Scroll container only wraps the data table - this.$container = $('
').addClass('section__table-container'); - this.$sentinel.insertBefore(this.$dom); - this.$header.insertBefore(this.$dom); - this.$container.insertBefore(this.$dom); - this.$container.append(this.$dom); + this.$sentinel.insertBefore(this.$container); + this.$header.insertBefore(this.$container); this.$header.empty(); this.$dom.children('colgroup').clone().appendTo(this.$header);