StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 22:35:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/skins.citizen.scripts/stickyHeader.js
View file

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

1
resources/skins.citizen.styles/components/StickyHeader.less
View file

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