viiktoor
@viiktoor

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

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

Так вот — есть колонка основного контента, а есть блок справа— при скролле он залипает сверху окна, делал скриптом 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;
}


60f5a8bd90979223676350.png
60f5a8c80effa950142574.png
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ответы на вопрос 1
@GovnoKoder_ITS
Мне 16 лет, начинающий front-end разработчик
if(window.screen.width < 1200) {
 // ваш код ?
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы