mediawiki-skins-Citizen/resources/scripts/header.js

59 lines
1.3 KiB
JavaScript
Raw Normal View History

2019-08-15 17:40:13 +00:00
/*
2019-10-08 19:22:02 +00:00
* Scroll up Header
* Modified from https://codepen.io/sajjad/pen/vgEZNy
*/
2019-08-15 17:40:13 +00:00
2019-12-26 09:40:43 +00:00
( function () {
// Hide header on scroll down
2019-12-26 09:40:43 +00:00
let didScroll,
lastScrollTop = 0,
navbarHeight = 0;
const delta = 0,
header = document.getElementsByTagName( 'header' )[ 0 ],
headerContainer = document.querySelector( '.mw-header-container' );
if ( headerContainer !== null ) {
navbarHeight = headerContainer.offsetHeight;
}
2019-12-26 09:40:43 +00:00
window.addEventListener( 'scroll', () => {
didScroll = true;
2019-12-26 09:40:43 +00:00
} );
function hasScrolled() {
const st = window.scrollY;
// Make scroll more than delta
2019-12-26 09:40:43 +00:00
if ( Math.abs( lastScrollTop - st ) <= delta ) {
return;
}
2019-12-26 09:40:43 +00:00
if ( st > lastScrollTop && st > navbarHeight ) {
// If scrolled down and past the navbar, add class .nav-up.
// Scroll Down
2019-12-26 09:40:43 +00:00
header.classList.remove( 'nav-down' );
header.classList.add( 'nav-up' );
} else {
// Scroll Up
2019-12-26 09:40:43 +00:00
const body = document.body,
html = document.documentElement,
2019-12-26 09:40:43 +00:00
documentHeight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
2019-12-26 09:40:43 +00:00
if ( st + window.innerHeight < documentHeight ) {
header.classList.remove( 'nav-up' );
header.classList.add( 'nav-down' );
}
}
lastScrollTop = st;
}
2019-12-26 09:40:43 +00:00
setInterval( function () {
if ( didScroll ) {
hasScrolled();
didScroll = false;
}
}, 250 );
}() );