fix: sticky table header depending on a sticky page header (#1053)

feat: define CSS variable to accomplish sticky header table cells depending on a sticky header

Author: mfranzke

source/_patterns/02-components/table/table.scss

@@ -168,7 +168,10 @@
 		tbody th {
 			background-color: #fff;
 			position: sticky;
-			top: -1px;
+			top: var(
+				--db-table-top-safe-space,
+				var(--db-has-fixed-header-height, -1px)
+			);
 		}
 	}
 }

source/_patterns/02-components/table/table~sticky-header.md

@@ -3,3 +3,5 @@ title: Table - sticky header
 ---
 
 You could set the header cells to appear sticky on scrolling, which is especially useful on longer tables with a lot of rows, by setting the `data-sticky="header"` attribute on the table.
+
+To control the top position which should be taken into account at which the table components header starts to get displayed sticky, you could set the CSS variable `--db-table-top-safe-space`. Elsewhere we take `--db-has-fixed-header-height` to accomplish possible sticky headers being defined for a page. If even also this one isn't set, the default `-1` value would get taken for the calculation.

source/_patterns/03-areas/_areas.scss

@@ -16,6 +16,7 @@ body.has-fixed-footer .rea-footer {
 }
 
 body.has-fixed-header {
+	--db-has-fixed-header-height: #{to-rem($pxValue: 70)};
 	// TODO: using some outsourced global declarations for the headers dimensions (height, padding and margins)
 	padding-top: to-rem($pxValue: 95);