Изменить класс при скроле

[ApTypka]

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

Спойлер

(function ($) {
    'use strict';
    $.fn.inviewport = function (options) {
      var settings = $.extend({
        'minPercentageInView' : 100,
        'standardClassName': 'in-view'
      }, options);
      this.each(function () {
        var $this = $(this),
          $win = $(window),
          changed = false,
          isVisible = function () {
            var c = settings.className || settings.standardClassName,
              min = (settings.threshold || settings.minPercentageInView) / 100,
              xMin = $this.width() * min,
              yMin = $this.height() * min,
              winPosX = $win.scrollLeft() + $win.width(),
              winPosY = $win.scrollTop() + $win.height(),
              elPosX = $this.offset().left + xMin,
              elPosY = $this.offset().top + yMin;
            if (winPosX > elPosX && winPosY > elPosY) {
              $this.addClass(c);
            }
          };
        $win.on('ready', isVisible())
          .on('resize scroll', function () {
            changed = true;
          })
        setInterval(function () {
          if (changed) {
            changed = false;
            isVisible();
          }
        }, 250);
      });
    };
  }(jQuery));

  $(function () {
    $('.animate').inviewport({
      threshold: 0.1,
      className: 'on-screen'
    })
  });

сейчас пользуюсь этим но походу изза Jquery он не работает на мобилках. да и нафиг нужна лишняя библиотека? поделитесь кто-нибудь юзабельным скриптом?

этот конкретный скрипт ко всем блокам с классом animate добавляет on-screen
таким образом я меняю стили детей этого блока, например .block1(opacity:0) на .on-screen .block1(opacity:1)
нужно что-то подобное и простое

 

[garphild]

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

Спойлер

(function ($) {
    'use strict';
    $.fn.inviewport = function (options) {
      var settings = $.extend({
        'minPercentageInView' : 100,
        'standardClassName': 'in-view'
      }, options);
      this.each(function () {
        var $this = $(this),
          $win = $(window),
          changed = false,
          isVisible = function () {
            var c = settings.className || settings.standardClassName,
              min = (settings.threshold || settings.minPercentageInView) / 100,
              xMin = $this.width() * min,
              yMin = $this.height() * min,
              winPosX = $win.scrollLeft() + $win.width(),
              winPosY = $win.scrollTop() + $win.height(),
              elPosX = $this.offset().left + xMin,
              elPosY = $this.offset().top + yMin;
            if (winPosX > elPosX && winPosY > elPosY) {
              $this.addClass(c);
            }
          };
        $win.on('ready', isVisible())
          .on('resize scroll', function () {
            changed = true;
          })
        setInterval(function () {
          if (changed) {
            changed = false;
            isVisible();
          }
        }, 250);
      });
    };
  }(jQuery));

  $(function () {
    $('.animate').inviewport({
      threshold: 0.1,
      className: 'on-screen'
    })
  });

сейчас пользуюсь этим но походу изза Jquery он не работает на мобилках. да и нафиг нужна лишняя библиотека? поделитесь кто-нибудь юзабельным скриптом?

этот конкретный скрипт ко всем блокам с классом animate добавляет on-screen
таким образом я меняю стили детей этого блока, например .block1(opacity:0) на .on-screen .block1(opacity:1)
нужно что-то подобное и простое

jQuery вполне себе нормально работает на мобилках. Подключайте мобилу к компу и смотрите что там не проходит. Хотя бы консоль.
Чистые варианты:
jQuery

$(window).on('scroll', () => {
  // проверяем что надо, меняем класс
});

JS

window.addEventListener('scroll', () => {
  // проверяем что надо, меняем класс
  document.getElementById('id').classList.add("myClass");
  document.getElementById('id').classList.remove("myClass");
});