fix(stickyHeader): 🐛 use more accurate calculation for placeholder

This commit is contained in:
alistair3149 2024-07-07 18:17:29 -04:00
parent 1214750eab
commit a7a763b57f
No known key found for this signature in database
2 changed files with 4 additions and 3 deletions

View file

@ -43,12 +43,12 @@ function init() {
placeholder.id = 'citizen-page-header-sticky-placeholder';
header.insertAdjacentElement( 'afterend', placeholder );
let staticHeaderHeight = header.offsetHeight;
let staticHeaderHeight = header.getBoundingClientRect().height;
const toggleStickyHeader = ( isSticky ) => {
window.requestAnimationFrame( () => {
document.body.classList.toggle( STICKY_CLASS, isSticky );
placeholder.style.height = `${ staticHeaderHeight - header.offsetHeight }px`;
placeholder.style.height = `${ staticHeaderHeight - header.getBoundingClientRect().height }px`;
} );
};
@ -68,7 +68,7 @@ function init() {
const onResizeEnd = () => {
// Refresh static header height after resize
staticHeaderHeight = header.offsetHeight;
staticHeaderHeight = header.getBoundingClientRect().height;
toggleStickyHeader( true );
};

View file

@ -1,5 +1,6 @@
#citizen-page-header-sticky-sentinel {
grid-area: afterHeader; // align right above content
margin-top: -1px;
height: 1px;
visibility: hidden;
contain: strict;