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

60 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
*/
2020-02-15 23:05:56 +00:00
2020-02-16 00:20:20 +00:00
( function () {
2020-02-15 23:11:35 +00:00
// Hide header on scroll down
var didScroll,
lastScrollTop = 0,
navbarHeight = 0,
delta = 0,
2020-02-16 00:20:20 +00:00
header = document.getElementsByTagName( 'header' )[ 0 ],
headerContainer = document.querySelector( '.mw-header-container' );
2020-02-15 23:11:35 +00:00
2020-02-16 00:20:20 +00:00
if ( headerContainer !== null ) {
2020-02-15 23:11:35 +00:00
navbarHeight = headerContainer.offsetHeight;
}
2020-02-16 00:20:20 +00:00
window.addEventListener( 'scroll', function () {
2020-02-15 23:11:35 +00:00
didScroll = true;
2020-02-16 00:20:20 +00:00
} );
2020-02-15 23:11:35 +00:00
function hasScrolled() {
var st = window.scrollY,
body,
html,
documentHeight;
2020-02-16 00:20:20 +00:00
if ( Math.abs( lastScrollTop - st ) <= delta ) {
2020-02-15 23:11:35 +00:00
return;
}
2020-02-16 00:20:20 +00:00
if ( st > lastScrollTop && st > navbarHeight ) {
2020-02-15 23:11:35 +00:00
// If scrolled down and past the navbar, add class .nav-up.
// Scroll Down
2020-02-16 00:20:20 +00:00
header.classList.remove( 'nav-down' );
header.classList.add( 'nav-up' );
2020-02-15 23:11:35 +00:00
} else {
// Scroll Up
body = document.body;
html = document.documentElement;
2020-02-16 00:20:20 +00:00
documentHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
2020-02-15 23:11:35 +00:00
2020-02-16 00:20:20 +00:00
if ( st + window.innerHeight < documentHeight ) {
header.classList.remove( 'nav-up' );
header.classList.add( 'nav-down' );
2020-02-15 23:11:35 +00:00
}
}
lastScrollTop = st;
}
2020-02-16 00:20:20 +00:00
setInterval( function () {
if ( didScroll ) {
2020-02-15 23:11:35 +00:00
hasScrolled();
didScroll = false;
}
2020-02-16 00:20:20 +00:00
}, 250 );
}() );