spaCy/website/assets/js/main.js

56 lines
1.9 KiB
JavaScript
Raw Normal View History

2016-10-03 21:19:13 +03:00
//- ----------------------------------
//- 💫 MAIN JAVASCRIPT
//- ----------------------------------
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
'use strict';
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
{
const updateVh = () => Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
const nav = $('.js-nav');
const sidebar = $('.js-sidebar');
const vhPadding = 525;
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
let vh = updateVh();
let scrollY = 0;
let scrollUp = false;
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
const updateNav = () => {
const vh = updateVh();
const newScrollY = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
2016-03-31 17:24:48 +03:00
scrollUp = newScrollY <= scrollY;
scrollY = newScrollY;
2016-10-03 21:19:13 +03:00
if(scrollUp && !(isNaN(scrollY) || scrollY <= vh)) topnav.classList.add('is-fixed');
else if(!scrollUp || (isNaN(scrollY) || scrollY <= vh/2)) topnav.classList.remove('is-fixed');
2016-03-31 17:24:48 +03:00
}
2016-10-03 21:19:13 +03:00
const updateSidebar = () => {
const sidebar = $('.js-sidebar');
if(sidebar.offsetTop - scrollY <= 0) sidebar.classList.add('is-fixed');
else sidebar.classList.remove('is-fixed');
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
[...$$('[data-section]')].map(el => {
const trigger = el.getAttribute('data-section');
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
if(trigger) {
const target = $(`#${trigger}`);
const offset = parseInt(target.offsetTop);
const height = parseInt(target.scrollHeight);
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
if((offset - scrollY) <= vh/2 && (offset - scrollY) > -height + vhPadding) {
[...$$('[data-section]')].forEach(item => item.classList.remove('is-active'));
$(`[data-section="${trigger}"]`).classList.add('is-active');
}
}
});
2016-03-31 17:24:48 +03:00
}
2016-10-03 21:19:13 +03:00
window.addEventListener('resize', () => vh = updateVh());
window.addEventListener('scroll', updateNav);
if($('.js-sidebar')) window.addEventListener('scroll', updateSidebar);
}