Как сделать так, чтобы при достижении экрана 992px, скрипт javascript отключался?

Question

[Мири Сеидов]

Делаю адаптив для сайта. Анимация шапки сайта мне мешает изменить высоту для устройств с 992px из-за скрипта (Именно из-за него. Без него шапка сайта при достижении ширины 992px уменьшается по высоте). Есть скрипт (снизу), который необходимо убирать при достижении экрана 992px. В js'e я полный 0 и ничего не умею, но эта штука мне обязательно нужна.

Этот скрипт необходимо убирать при экране меньше чем 992px:

// Уменьшение Шапки при скролле
window.onscroll = function() {
    scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { //80

    document.getElementById('header__main').style.height = "80px";
    document.getElementById('header__logo-img').style.height = "140px";
    document.getElementById('header__menu').style.paddingTop = "0px";
  }
  
  else {
    document.getElementById('header__main').style.height = "136px";
    document.getElementById('header__logo-img').style.height = "170px";
    document.getElementById('header__menu').style.paddingTop = "7px";
  }
}

Помогите пожалуйста

Answer 1

[Александр]

let headerMain = document.getElementById('header__main');
let headerLogo = document.getElementById('header__logo-img');
let headerMenu = document.getElementById('header__menu');

function applySmallHeader() {
    headerMain.style.height = '80px';
    headerLogo.style.height = '140px';
    headerMenu.style.paddingTop = '0px';
}

function applyNormalHeader() {
    headerMain.style.height = '136px';
    headerLogo.style.height = '170px';
    headerMenu.style.paddingTop = '7px';
}

function onPageScroll() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        applySmallHeader();
    } else {
        applyNormalHeader();
    }
}

window.addEventListener('scroll', function () {
    if (window.innerWidth > 992) {
        onPageScroll();
    }
});

window.addEventListener('resize', function () {
    if (window.innerWidth <= 992) {
        applyNormalHeader();
    } else {
        onPageScroll();
    }
});

Comments

[Мири Сеидов]

У меня не отключился скрипт

[Мири Сеидов]

Анимация работает, но скрипт при достижении экрана 992 и меньше не отключается :(

[Александр]

Мири Сеидов, Обновил ответ. В самом начале заранее получим элементы, чтобы при каждом вызове функций их не получать. Далее, код в условии обернут в отдельные функции: applySmallHeader (когда позиция скролла по вертикали больше 80 пикселей) и applyNormalHeader (когда позиция скролла по вертикали меньше или равна 80 пикселям). Функция scrollFunction была переименована в onPageScroll, в которой мы вызываем уже ранее описанные функции. При вводе доп. проверки на ширину экрана необходимо учесть следующие вещи:
1. Если ширина экрана меньше или равна 992 пикселям, то шапку необходимо сразу вернуть к обычному состоянию, в противном случае необходимо поставить тот стиль, который зависит от позиции скролла по вертикали.
2. При скролле страницы необходимо вызывать скрипт изменение стиля шапка только в том случае, если ширина страницы браузера больше 992 пикселей.

[Мири Сеидов]

Александр, сейчас проверю работоспособность

[Мири Сеидов]

Александр, проблема такая что анимация-то выключается при достижении 992 пикселя и меньше, но не сам скрипт. Хотелось бы чтобы сам скрипт выключался. Не получилось, но спасибо за старания :)