Change Class Based on Scroll - Without JQuery

I'm new to Javascript and am trying to make a JQuery Waypoints scroll effect without using JQuery.

Here's what I have with Waypoints and it's working, but I don't want to depend on anything other than just Vanilla JS:

// Change masthead logo size when .intro enters/exits

$.each(['Logo-waypoint'], function(i, classname) {
var $elements = $('.' + classname)

$elements.each(function() {
    new Waypoint.Inview({
        element: this,
        entered: function(direction) {
            $('.kracked-header').removeClass('kracked-header--compact');
        },
        exit: function(direction) {
            $('.kracked-header').addClass('kracked-header--compact');
      },
        group: classname
    })
  })
});

Is there a way to change this into regular Javascript?

This should get you pretty close.

['Logo-waypoint'].forEach(function(classname, i) {
    var elements = document.querySelectorAll('.' + classname);

    elements.forEach(function() {
        new Waypoint.Inview({
            element: this,
            entered: function(direction) {
                document.querySelectorAll('.kracked-header').classList.remove('kracked-header--compact');
            },
            exit: function(direction) {
                document.querySelectorAll('.kracked-header').classList.add('kracked-header--compact');
                $('.kracked-header').addClass('kracked-header--compact');
            },
            group: classname
        });
    });
});

This is a good site for quick conversions: http://youmightnotneedjquery.com/