function elementInViewport(myElement) {
  const myElementHeight = myElement.offsetHeight;
  const myElementWidth = myElement.offsetWidth;

  const bounding = myElement.getBoundingClientRect();

  if (
    bounding.top >= -myElementHeight &&
    bounding.left >= -myElementWidth &&
    bounding.right <=
      (window.innerWidth || document.documentElement.clientWidth) +
        myElementWidth &&
    bounding.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) +
        myElementHeight
  ) {
    return true;
  } else {
    return false;
  }
}

/* Check if Module Map Instructions is in Viewport */
var isOnScreen = function (element) {
  var w = window,
        elBounds = element.getBoundingClientRect(),
        scrollTop = w.pageYOffset,
        elTop = elBounds.y + scrollTop;

  return (
     elTop < (w.innerHeight + scrollTop) &&
     elTop > (scrollTop - elBounds.height)
  );
}

    
    $.fn.visible = function (partial) {
      var $t = $(this),
        $w = $(window),
        viewTop = $w.scrollTop()+130, // 130 because fixed header
        viewBottom = viewTop + $w.height(),
        _top = $t.offset().top,
        _bottom = _top + $t.height(),
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;

      return compareBottom <= viewBottom && compareTop >= viewTop;
    };

    $(window).scroll(function (event) {
      $(".vertical-scrolling").each(function (i, el) {
        var el = $(el);
        if (el.visible(true)) {
          el.addClass("active");
        } else {
          el.removeClass("active");
        }
      });