Snippets Collections
/* 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");
        }
      });
star

Tue Jan 12 2021 16:51:24 GMT+0000 (UTC)

#viewport #visibility

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension