var tocCopy = document.createElement('div'); tocCopy.id = 'toc-copy'; var toc = document.querySelector('#toc'); if (toc) { tocCopy.innerHTML = toc.innerHTML; document.getElementsByClassName('container')[0].appendChild(tocCopy); var menus = document.querySelectorAll('#toc-copy ul'); for (var i = 0; i < menus.length; i++) { menus[i].addEventListener('mouseover', function() { this.previousElementSibling.classList.add('hover') }); menus[i].addEventListener('mouseout', function() { this.previousElementSibling.classList.remove('hover') }); } var labels = document.querySelectorAll('#toc-copy h4'); for (var i = 0; i < labels.length; i++) { labels[i].addEventListener('click', function() { this.classList.toggle('active') }); } tocCopy.addEventListener('click', function(e) { if (e.target.nodeName != 'H4') { this.classList.toggle('active'); } }); var scrollPos = function scrollPos () { var scroll = window.scrollY; if (scroll >= (toc.offsetHeight + toc.offsetTop)) { document.body.classList.add('scrolled'); } else { document.body.classList.remove('scrolled'); } } scrollPos(); window.addEventListener('scroll', function(e) { scrollPos(); }); }