events_side_nav.html

<div id="event-side-nav" class="sticky-top">
  <ul id="get-started-contributor-sidebar-list">
    {% assign events = site.events | where: "category", "event" | sort_natural: "date" | reverse %}

    {% for item in events %}
      <ul>
        <li><a href="#{{ item.title | remove: " " }}">{{ item.title }}</a></li>
      </ul>
    {% endfor %}
  </ul>
</div>

<script>

  $("#get-started-contributor-sidebar-list li a").on("click", function(e) {
    var href = $(this).attr("href")
    $('html, body').stop().animate({
      scrollTop: $(href).offset().top - 100
    }, 850);
    (e).preventDefault;
  });

  var lastId,
    topMenu = $("#get-started-contributor-sidebar-list"),
    topMenuHeight = topMenu.outerHeight() + 1,
    // All sidenav items
    menuItems = topMenu.find("a"),
  // Anchors for menu items
    scrollItems = menuItems.map(function() {
      var item = $(this).attr("href");
      if (item.length) { return item; }
  });

  $(window).scroll(function(){
    var fromTop = $(this).scrollTop()+topMenuHeight;
    var article = '.pytorch-article'

    $(article).each(function(i){
      var offsetScroll = $(this).offset().top-$(window).scrollTop();
      if (offsetScroll <= topMenuHeight + 200 && offsetScroll >= topMenuHeight - 200 && scrollItems[i] == "#" + $(this).children().attr("id") && $(".hidden:visible")) {
        $(menuItems).removeClass("active");
        $(menuItems[i]).addClass("active");
      }
    })
  });

</script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>