Изменение переменной в зависимости от разрешения экрана. Хелп.

[kkkirilll]

Понимаю, что это уже заезженная фраза, но все же помогите чайнику, пожалуйста
Есть такой код. Он двигает элемент хедер в зависимости от прокрутки страницы.
changeHeaderOn сообщает в пикселях, когда нужно включить класс.
Мне нужно, чтобы changeHeaderOn была переменной при разной ширине браузера, например:
при ( winDow.width() < 992 ) changeHeaderOn = 150 пикселей,
а при ( winDow.width() >= 992 ) changeHeaderOn = 50 пикселей.
Кажется, что понимаю, чего хочу, а собрать как надо не могу.

(function() {

		var docElem = document.documentElement,
			didScroll = false,
			changeHeaderOn = 50;
			document.querySelector( 'header' );
		function init() {
			window.addEventListener( 'scroll', function() {
				if( !didScroll ) {
					didScroll = true;
					setTimeout( scrollPage, 100 );
				}
			}, false );
		}
		
		function scrollPage() {
			var sy = scrollY();
			if ( sy >= changeHeaderOn ) {
				$( 'header' ).addClass('active');
			}
			else {
				$( 'header' ).removeClass('active');
			}
			didScroll = false;
		}
		
		function scrollY() {
			return window.pageYOffset || docElem.scrollTop;
		}
		
		init();
		
	})();

[ILL-JAH]

changeHeaderOn = window.screen.width < 992 ? 150 : 50;
Оно?

[kkkirilll]

Спасибо
Но я похоже ступил и все оказывается сложнее. Ничего не изменилось. На широком экране 50px срабатывают. На маленьком - нет.

Мне, видимо, нужно, чтобы при смене размера браузера включался другой класс

$( 'header' ).addClass('active');

То есть при ширине браузера от 992 был класс 'active'
А при меньшем размере, например, 'miniactive'

Чот я уже совсем запутался. Наверное, класс менять все-таки не надо.
добавлю ссылку {удалил}
Пытаюсь поправить хедер "Меню" в мобильной версии (меньше 992рх), чтобы не дергался при прокрутке.

[ruslan_mart]

kkkirilll, советую почитать про CSS-медиа запросы и единицы измерения vw/vh.

[kkkirilll]

Спасибо. Почитал, попробовал, потыкал.
Но, как я понял, vw/vh дают постоянную зависимость элемента от размера окна.
Мне же нужно, чтобы скрипт работал двумя способами в зависимости от двух вариантов размера браузера (больше или меньше 992рх).
Логика моих действий:
если я меняю

changeHeaderOn = 50;

на значение 135, к примеру, то в малой версии все как надо работает, а в стандартной большой версии скрипт начинает поздно срабатывать. Точнее сказать: начинает срабатывать позднее на 85рх (135-50=85рх) прокрутки страницы.

[ruslan_mart]

kkkirilll, что у Вас там? Фиксированный блок? Можно просто дополнительно margin-top давать.

@media all and (max-width: 992px) {
    .element {
        margin-top: 85px;
    }
}

[kkkirilll]

Даже не знаю, что сказать.
А Вы переходили по ссылке, что я указал?
Средствами Javascript возможно сделать то, о чем я говорю?
Я уже многое перепробовал. И проблема начала решаться именно изменением значения changeHeaderOn.

[kkkirilll]

Вопрос решен (с малым несущественным недостатком).
Спасибо ILL-JAH за наводку.
Стало работать с таким кодом:

if (window.innerWidth > 1000) {
				  changeHeaderOn = 50;
				}
				else {
				  changeHeaderOn = 130;
				}