Как добавить или убрать класс при изменении разрешения экрана?

Question

Alex-Broudy @Alex-Broudy

JavaScript

Как добавить или убрать класс при изменении разрешения экрана?

Добрые люди, нужна помощь специалистов.

Есть такой скрипт из интернета - липкий сайдбар, где блок в сайдбаре или весь сайдбар прилипает к верхней части экрана при перематывании страницы и отлипает при достижении нижней границы блока с основным контентом.

Основной контент имеет id="rs-content"
Сайдбар имеет id="rs"

Вот сам скрипт:

$(function(){
var a = document.querySelector('#rs'), b = null, P = 0;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
  if (b == null) {
    var Sa = getComputedStyle(a, ''), s = '';
    for (var i = 0; i < Sa.length; i++) {
      if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
        s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
      }
    }
    b = document.createElement('div');
    b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
    a.insertBefore(b, a.firstChild);
    var l = a.childNodes.length;
    for (var i = 1; i < l; i++) {
      b.appendChild(a.childNodes[1]);
    }
    a.style.height = b.getBoundingClientRect().height + 'px';
    a.style.padding = '0';
    a.style.border = '0';
  }
  var Ra = a.getBoundingClientRect(),
      R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#rs-content').getBoundingClientRect().bottom);  // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
  if ((Ra.top - P) <= 0) {
    if ((Ra.top - P) <= R) {
      b.className = 'stop';
      b.style.top = - R +'px';
    } else {
      b.className = 'sticky';
      b.style.top = P + 'px';
    }
  } else {
    b.className = '';
    b.style.top = '';
  }
  window.addEventListener('resize', function() {
    a.children[0].style.width = getComputedStyle(a, '').width
  }, false);
}
});

Необходимо чтобы в мобильной версии текущий липкий сайдбар не прилипал, а оставался по умолчанию, как и до перематывания страницы. Нашел решение, но оно на jquery, а я ни в js ни в jquery особо не понимаю ничего.

Вот это решение:

jQuery(document).ready(function(){
  function classFunction(){
    if(jQuery('body').width()<760){ jQuery('#rs').removeClass('sticky').addClass('stop');
    }
    else{
      jQuery('#rs').removeClass('stop').addClass('sticky');
    }
  }
  classFunction();
  jQuery(window).resize(classFunction);
 })

Буду рад любой помощи или подсказкам в каком направлении двигаться.