Изменить класс на основе прокрутки - без JQuery

Я новичок в Javascript и пытаюсь создать эффект прокрутки путевых точек JQuery без использования JQuery.

Вот что у меня есть с 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?

Вам стоит посмотреть на сайте youmightnotneedjquery.com

— 18.04.2018 04:57

По сути, вы просите нас перевести код на простой JS. Вместо этого вам следует сначала попробовать сделать это самостоятельно, а затем задать вопрос, если он не работает должным образом.

— 18.04.2018 04:58

javascript jquery-waypoints

18.04.2018 04:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

380

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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/

Спасибо за это, думаю, отсюда я разберусь. Я очень ценю это - и отличная ссылка!

— 18.04.2018 05:38

18.04.2018 05:17