You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.2 KiB
JavaScript
90 lines
2.2 KiB
JavaScript
(function() {
|
|
|
|
|
|
// Add sidebar interaction
|
|
window.onload = function() {
|
|
var sidebarToggle = document.getElementById('sidebar-toggle');
|
|
if ( !sidebarToggle ) return;
|
|
|
|
var top_nav_el = document.getElementsByClassName('nav');
|
|
var anchors_container_el = document.getElementById('anchors-container');
|
|
var anchors_top_el = document.getElementById('anchors-top');
|
|
var anchors_bottom_el = document.getElementById('anchors-bottom');
|
|
var anchors_el = document.getElementById('anchors');
|
|
var sidebars = document.getElementsByClassName('sidebar');
|
|
|
|
function toggleVisible(elem) {
|
|
if ( elem.classList.contains('visible') )
|
|
elem.classList.remove('visible');
|
|
else
|
|
elem.classList.add('visible');
|
|
}
|
|
|
|
function handleScrolling() {
|
|
if ( anchors_top_el && anchors_bottom_el ) {
|
|
var anchors_top_bounds = anchors_top_el.getBoundingClientRect();
|
|
var anchors_bottom_bounds = anchors_bottom_el.getBoundingClientRect();
|
|
var anchors_height = anchors_el.clientHeight;
|
|
var nav_bounds = top_nav_el[0].getBoundingClientRect();
|
|
|
|
if ( anchors_top_bounds.top < nav_bounds.bottom ) {
|
|
var new_bottom = nav_bounds.bottom + anchors_height;
|
|
if ( new_bottom < anchors_bottom_bounds.bottom && new_bottom < document.documentElement.clientHeight ) {
|
|
anchors_el.classList.add('pinned');
|
|
return;
|
|
}
|
|
}
|
|
|
|
anchors_el.classList.remove('pinned');
|
|
}
|
|
}
|
|
|
|
sidebarToggle.onclick = function() {
|
|
var l = sidebars.length, i;
|
|
for ( i = 0; i < l; ++i )
|
|
toggleVisible(sidebars[i]);
|
|
};
|
|
|
|
function hasParent(node, parent) {
|
|
while ( node !== parent ) {
|
|
node = node.parentNode;
|
|
if ( !node ) return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
document.addEventListener("click", function(event) {
|
|
var l = sidebars.length, i;
|
|
for ( i = 0; i < l; ++i ) {
|
|
if ( hasParent(event.target, sidebars[i]) )
|
|
return;
|
|
|
|
if ( hasParent(event.target, sidebarToggle) )
|
|
return;
|
|
}
|
|
|
|
for ( i = 0; i < l; ++i )
|
|
sidebars[i].classList.remove('visible');
|
|
});
|
|
|
|
var ticking = false;
|
|
var lastY = 0;
|
|
|
|
window.addEventListener('scroll', function() {
|
|
var currentY = window.scrollY;
|
|
|
|
if ( !ticking ) {
|
|
window.requestAnimationFrame(function() {
|
|
handleScrolling();
|
|
ticking = false;
|
|
lastY = currentY;
|
|
});
|
|
}
|
|
|
|
ticking = true;
|
|
});
|
|
};
|
|
|
|
|
|
})();
|