diff --git a/changelogs/DP-20241.yml b/changelogs/DP-20241.yml new file mode 100644 index 0000000000..e1e61f629f --- /dev/null +++ b/changelogs/DP-20241.yml @@ -0,0 +1,6 @@ +Changed: + - project: Patternlab + component: ResponsiveTable + description: Remove extra space above the sticky table header. (#1226) + issue: DP-20241 + impact: Minor diff --git a/patternlab/styleguide/source/assets/js/modules/responsiveTable.js b/patternlab/styleguide/source/assets/js/modules/responsiveTable.js index 7e39cb0da6..0771a617b9 100644 --- a/patternlab/styleguide/source/assets/js/modules/responsiveTable.js +++ b/patternlab/styleguide/source/assets/js/modules/responsiveTable.js @@ -130,17 +130,11 @@ export default (function (window, document, $) { // This calculates the additional offset that a table sticky header should drop down. function getAdditionalOffset() { let additionalOffset = 0; - if (document.documentElement.clientWidth <= 825) { - const $jsStickyHeader = $(".js-sticky-header"); - if ($jsStickyHeader) { - additionalOffset += $jsStickyHeader.height(); - } - } if ($(".js-scroll-anchors")[0] && document.documentElement.clientWidth <= 765) { additionalOffset += $(".js-scroll-anchors").height(); } - if (document.documentElement.classList.contains('stickyTOC')) { + if (document.documentElement.classList.contains("stickyTOC")) { if (document.documentElement.clientWidth <= 841) { additionalOffset += 75; } @@ -168,10 +162,14 @@ export default (function (window, document, $) { if (!rt.headerStuck && elementTop < stuckTop && tableBottom > stuckBottom) { responsiveTables[rt.index].headerStuck = true; rt.$stickyHeader.css("opacity", 1); + rt.$stickyHeader.css("-webkit-box-shadow", ""); + rt.$stickyHeader.css("box-shadow", ""); } else if (rt.headerStuck && (elementTop > stuckTop || tableBottom < stuckBottom)) { responsiveTables[rt.index].headerStuck = false; rt.$stickyHeader.css("opacity", 0); + rt.$stickyHeader.css("-webkit-box-shadow", "none"); + rt.$stickyHeader.css("box-shadow", "none"); } }