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

Question

[Виктор]

В разметке и программировании я не особо разбираюсь) сайт делаю первый раз

Так вот — есть колонка основного контента, а есть блок справа— при скролле он залипает сверху окна, делал скриптом jQuery с этого сайта , 3ий способ

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

Как сделать, чтобы на мобильных устройствах, или, например, на ширине экрана меньше 576px, этот блок переставал залипать и становился обычным, как без скрипта?

Вот код скрипта

(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);  // если изменить размер окна браузера, измениться ширина элемента
    }
    })()

Вот стили

.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) {
 // ваш код ?
}

Comments

[Виктор]

к сожалению, не работает

[Артем]

Виктор, *

if ( screen.availWidth < 576 ) {
  // some code...
}

[Артем]

У screen есть только свойство availWidth

[Виктор]

Сергей Волков, Артем, ааа наврал, сработало, спасибо. Только работает при загрузке/обновлении страницы, если, например, вручную уменьшить окно браузера то, когда окно будет меньше 576px — не сработает

Можно как нибудь динамически получать эту ширину?

[Михаил]

Виктор, А зачем тут вообще нужен js когда есть свойство position: sticky в css?

[Артем]

Слушайте resize эвент у объекта, window Виктор

[Артем]

А вообще, как сказали ранее, можно использовать липкое позиционирование и медиазапросы, ограничившись лишь css