javascript - 基于滚动更改类 - 不使用 JQuery

Question

我是 Javascript 新手，正在尝试在不使用 JQuery 的情况下制作 JQuery Waypoints 滚动效果。

这是我对 Waypoints 的了解，它正在工作，但我不想依赖 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
    })
  })
});

有没有办法将其更改为常规 Javascript？

Answer 1

这应该会让你非常接近。

['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
        });
    });
});

这是一个快速转化的好网站:http://youmightnotneedjquery.com/