set header from fixed to sticky
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 6b972be..08d89b4 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -73,6 +73,9 @@
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$form-check-inline-input-margin-x: 0.75rem;
$input-placeholder-color: $gray-600 !default;
+$grid-gutter-width: 30px !default;
+
+$page-padding-top: 1rem;
/* used icons ---------------------------------------------------- */
@@ -326,7 +329,10 @@
margin-bottom: 1rem;
&.fixed-top {
- margin-bottom: 0;
+ position: sticky;
+ margin-top: -$page-padding-top;
+ margin-left: -($grid-gutter-width / 2);
+ margin-right: -($grid-gutter-width / 2);
}
}
@@ -662,7 +668,7 @@
/* page ----------------------------------------------------------- */
.tobago-page {
- padding-top: 1rem;
+ padding-top: $page-padding-top;
padding-bottom: 1rem;
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
index 94c2ac7..4ec0c53 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
@@ -27,53 +27,32 @@
const body = DomUtils.selfOrQuerySelectorAll(element, "body")[0];
if (body) {
- const headers = DomUtils.selfOrQuerySelectorAll(element, ".fixed-top");
const footers = DomUtils.selfOrQuerySelectorAll(element, ".fixed-bottom");
- HeaderFooter.setMargins(body, headers, footers);
+ HeaderFooter.setMargins(body, footers);
- let lastMaxHeaderHeight = 0;
let lastMaxFooterHeight = 0;
// todo: check possible memory leak: use of DOM elements in event listener!
window.addEventListener("resize", function (): void {
- const maxHeaderHeight: number = HeaderFooter.getMaxHeaderHeight(headers);
const maxFooterHeight: number = HeaderFooter.getMaxFooterHeight(footers);
- if (maxHeaderHeight !== lastMaxHeaderHeight
- || maxFooterHeight !== lastMaxFooterHeight) {
- HeaderFooter.setMargins(body, headers, footers);
-
- lastMaxHeaderHeight = maxHeaderHeight;
+ if (maxFooterHeight !== lastMaxFooterHeight) {
+ HeaderFooter.setMargins(body, footers);
lastMaxFooterHeight = maxFooterHeight;
}
});
}
};
- static setMargins = function (body: HTMLElement, headers: HTMLElement[], footers: HTMLElement[]): void {
- const maxHeaderHeight = HeaderFooter.getMaxHeaderHeight(headers);
+ static setMargins = function (body: HTMLElement, footers: HTMLElement[]): void {
const maxFooterHeight = HeaderFooter.getMaxFooterHeight(footers);
- if (maxHeaderHeight > 0) {
- body.style.marginTop = maxHeaderHeight + "px";
- }
if (maxFooterHeight > 0) {
body.style.marginBottom = maxFooterHeight + "px";
}
};
- static getMaxHeaderHeight = function (headers: HTMLElement[]): number {
- let maxHeaderHeight = 0;
- headers.forEach(function (element: HTMLElement): void {
- const height = DomUtils.outerHeightWithMargin(element);
- if (height > maxHeaderHeight) {
- maxHeaderHeight = height;
- }
- });
- return maxHeaderHeight;
- };
-
static getMaxFooterHeight = function (footers: HTMLElement[]): number {
let maxFooterHeight = 0;
footers.forEach(function (element: HTMLElement): void {
