How can I make my jQuery script stop working when the screen width decreases?

Question

css

I don’t really understand markup and programming) I’m doing the site for the first time

So - there is a main content column, and there is a block on the right - when scrolling it sticks on top of the window, I did it with a jQuery script from this site , 3rd method

The problem is that on the mobile version , when everything lines up in one column, the block also sticks to the top of the screen and overlaps the content.

How to make that on mobile devices, or, for example, on a screen width less than 576px, this block stops sticking and becomes normal, like without a script?

Here is the script code

(function(){  // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными
    var a = document.querySelector('#nv'), b = null;  // селектор блока, который нужно закрепить
    window.addEventListener('scroll', Ascroll, false);
    document.body.addEventListener('scroll', Ascroll, false);  // если у html и body высота равна 100%
    function Ascroll() {
      if (b == null) {  // добавить потомка-обёртку, чтобы убрать зависимость с соседями
        var Sa = getComputedStyle(a, ''), s = '';
        for (var i = 0; i < Sa.length; i++) {  // перечислить стили CSS, которые нужно скопировать с родителя
          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';  // если элементу присвоен padding или border
      }
      if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
        b.className = 'sticky';
      } else {
        b.className = '';
      }
      window.addEventListener('resize', function() {
        a.children[0].style.width = getComputedStyle(a, '').width
      }, false);  // если изменить размер окна браузера, измениться ширина элемента
    }
    })()

Here are the styles

.navigation{
  display: flex;
  flex-direction: column;
  position: relative;
  width: auto;
  height: auto;
}

#nv{
  display: flex;
  flex-direction: column;
  position: relative;
  width: auto;
  height: auto;
}
.sticky {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  position: fixed;
  top: 10px;
  z-index: 101;
}

Answer 1

if(window.screen.width < 1200) {
 // ваш код ?
}