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/

基于Scroll更改类 - 没有JQuery

1 个答案: