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

refactor(core): use scroll-padding-top for top margin

Browse source
This commit is contained in:
alistair3149 2022-05-17 15:35:04 -04:00
parent 1be7f5faaf
commit 9d711d4ee2
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/skins.citizen.scripts/tableOfContents.js
View file

@ -41,15 +41,23 @@ function changeActiveSection( id ) {
* @return {void} * @return {void}
*/ */
function initToC() { function initToC() {
const const bodyContent = document.getElementById( 'bodyContent' );
header = document.querySelector( '.citizen-header' ),
bodyContent = document.getElementById( 'bodyContent' ); // We use scroll-padding-top to handle scrolling with fixed header
// It is better to respect that so it is consistent
const getTopMargin = () => {
return Number(
window.getComputedStyle( document.documentElement )
.getPropertyValue( 'scroll-padding-top' )
.slice( 0, -2 )
) + 20;
};
const initSectionObserver = require( './sectionObserver.js' ).init; const initSectionObserver = require( './sectionObserver.js' ).init;
const sectionObserver = initSectionObserver( { const sectionObserver = initSectionObserver( {
elements: bodyContent.querySelectorAll( '.mw-headline' ), elements: bodyContent.querySelectorAll( '.mw-headline' ),
topMargin: header.getBoundingClientRect().height, topMargin: getTopMargin(),
onIntersection: ( section ) => { changeActiveSection( section.id ); } onIntersection: ( section ) => { changeActiveSection( section.id ); }
} ); } );