<style type=“text/css” media=“screen”> .post-menu ul {

list-style: none;
padding: 0;
margin: 0;

} </style>

<div class=“post-menu”>

<div class="post-menu-title">TOC</div>
<div class="post-menu-content"></div>

</div>

<script>

function generateContent() {
  var menu = document.querySelector(".post-menu");
  var menuContent =  menu.querySelector(".post-menu-content");
  var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");

  // Hide menu when no headings
  if (headings.length === 0) {
    return menu.style.display = "none";
  }

  // Generate post menu
  var menuHTML = '';
  for (var i = 0; i < headings.length; i++) {
    var h = headings[i];
    menuHTML += (
      '<li class="h-' + h.tagName.toLowerCase() + '">'
      + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
  }

  menuContent.innerHTML = '<ul>' + menuHTML + '</ul>';

  // The header element
  var header = document.querySelector('header.site-header');

  function doMenuCollapse(index, over_items) {
    var items = menuContent.firstChild.children;

    if (over_items == undefined) {
      over_items = 20;
    }

    if (items.length < over_items) {
      return;
    }

    var activeItem = items[index];
    var beginItem = activeItem
    var endItem = activeItem
    var beginIndex = index;
    var endIndex = index + 1;
    while (beginIndex >= 0
      && !items[beginIndex].classList.contains('h-h2')) {
      beginIndex -= 1;
    }
    while (endIndex < items.length
      && !items[endIndex].classList.contains('h-h2')) {
      endIndex += 1;
    }
    for (var i = 0; i < beginIndex; i++) {
      item = items[i]
      if (!item.classList.contains('h-h2')) {
        item.style.display = 'none';
      }
    }
    for (var i = beginIndex + 1; i < endIndex; i++) {
      item = items[i]
      // if (!item.classList.contains('h-h2')) {
        item.style.display = '';
      // }
    }
    for (var i = endIndex; i < items.length; i++) {
      item = items[i]
      if (!item.classList.contains('h-h2')) {
        item.style.display = 'none';
      }
    }
  }

  // Init menu collapsed
  doMenuCollapse(-1);

  // Active the menu item
  window.addEventListener('scroll', function (event) {
    var lastActive = menuContent.querySelector('.active');
    var changed = true;
    var activeIndex = -1;
    for (var i = headings.length - 1; i >= 0; i--) {
      var h = headings[i];
      var headingRect = h.getBoundingClientRect();
      var headerRect = header.getBoundingClientRect();
      var headerTop = Math.floor(headerRect.top);
      var headerHeight = Math.floor(headerRect.height);
      var headerHeight = headerTop + headerHeight + 20;
      if (headingRect.top <= headerHeight) {
        var id = 'h-' + h.getAttribute('id');
        var a = menuContent.querySelector('a[href="#' + id  + '"]');
        var curActive = a.parentNode;
        if (curActive) {
          curActive.classList.add('active');
          activeIndex = i;
        }
        if (lastActive == curActive) {
          changed = false;
        }
        break;
      }
    }
    if (changed) {
      if (lastActive) {
        lastActive.classList.remove('active');
      }
      doMenuCollapse(activeIndex);
    }
    event.preventDefault();
  });
}
generateContent();

</script>