根据滚动更改 Class - 没有 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/

根据滚动更改 Class - 没有 JQuery

Change Class Based on Scroll - Without JQuery

javascript

jquery-waypoints