feat(core): add sticky body header

This commit is contained in:
alistair3149 2022-09-29 22:33:06 -04:00
parent 20ed41ec2c
commit e72d7c00a3
No known key found for this signature in database
6 changed files with 50 additions and 4 deletions

View file

@ -63,17 +63,17 @@ function bindCloseOnUnload() {
* @return {void}
*/
function onTitleHidden( document ) {
const title = document.getElementById( 'firstHeading' );
const title = document.getElementById( 'citizen-body-header-sticky-sentinel' );
if ( title ) {
const scrollObserver = require( './scrollObserver.js' );
const observer = scrollObserver.initScrollObserver(
() => {
document.body.classList.add( 'citizen-title--hidden' );
document.body.classList.add( 'citizen-body-header--sticky' );
},
() => {
document.body.classList.remove( 'citizen-title--hidden' );
document.body.classList.remove( 'citizen-body-header--sticky' );
}
);
observer.observe( title );

View file

@ -252,5 +252,17 @@
padding-right: var( --width-toc );
}
}
.citizen-animations-ready {
.toc {
transition: @transition-transform;
}
}
.citizen-body-header--sticky {
.toc {
transform: translateY( 3rem );
}
}
}
}

View file

@ -0,0 +1,32 @@
#citizen-body-header-sticky-sentinel {
position: absolute;
right: 0;
left: 0;
height: 3.5rem; // HACK: Estimated size of body-header
visibility: hidden;
}
.citizen-body-header--sticky {
.mw-body-header {
position: sticky;
z-index: 1;
top: 0;
padding-bottom: var( --space-md );
border-bottom: 1px solid var( --border-color-base );
background-color: var( --color-surface-0 );
}
.firstHeading {
font-size: 1.25rem;
}
.toc {
transform: translateY( 3rem );
}
}
@media ( max-height: 1000px ) {
.page-actions {
display: none;
}
}

View file

@ -25,7 +25,7 @@
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding-top: @content-margin-top;
padding-top: var( --space-md );
margin-top: var( --space-xl );
margin-bottom: @content-margin-top * 2;
gap: @content-margin-top;

View file

@ -29,6 +29,7 @@
@import 'Menu.less';
@import 'Catlinks.less';
@import 'Footer.less';
@import 'Stickyheader.less';
}
@media print {

View file

@ -4,6 +4,7 @@
string html-title-heading--formatted
string html-tagline
}}
<div id="citizen-body-header-sticky-sentinel"></div>
<header class="mw-body-header">
<div class="page-heading">
<div class="firstHeading-container">