Изменение переменной в зависимости от разрешения экрана. Хелп.
Понимаю, что это уже заезженная фраза, но все же помогите чайнику, пожалуйста:help:
Есть такой код. Он двигает элемент хедер в зависимости от прокрутки страницы. 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(); })(); |
changeHeaderOn = window.screen.width < 992 ? 150 : 50;
Оно? |
Спасибо:thanks:
Но я похоже ступил и все оказывается сложнее. Ничего не изменилось. На широком экране 50px срабатывают. На маленьком - нет. Мне, видимо, нужно, чтобы при смене размера браузера включался другой класс $( 'header' ).addClass('active'); То есть при ширине браузера от 992 был класс 'active' А при меньшем размере, например, 'miniactive' Чот я уже совсем запутался. Наверное, класс менять все-таки не надо. добавлю ссылку {удалил} Пытаюсь поправить хедер "Меню" в мобильной версии (меньше 992рх), чтобы не дергался при прокрутке. |
kkkirilll, советую почитать про CSS-медиа запросы и единицы измерения vw/vh.
|
Спасибо. Почитал, попробовал, потыкал.
Но, как я понял, vw/vh дают постоянную зависимость элемента от размера окна. Мне же нужно, чтобы скрипт работал двумя способами в зависимости от двух вариантов размера браузера (больше или меньше 992рх). Логика моих действий: если я меняю changeHeaderOn = 50;на значение 135, к примеру, то в малой версии все как надо работает, а в стандартной большой версии скрипт начинает поздно срабатывать. Точнее сказать: начинает срабатывать позднее на 85рх (135-50=85рх) прокрутки страницы. |
kkkirilll, что у Вас там? Фиксированный блок? Можно просто дополнительно margin-top давать.
@media all and (max-width: 992px) { .element { margin-top: 85px; } } |
Даже не знаю, что сказать.
А Вы переходили по ссылке, что я указал? Средствами Javascript возможно сделать то, о чем я говорю? Я уже многое перепробовал. И проблема начала решаться именно изменением значения changeHeaderOn. |
Вопрос решен (с малым несущественным недостатком).
Спасибо ILL-JAH за наводку. Стало работать с таким кодом: if (window.innerWidth > 1000) { changeHeaderOn = 50; } else { changeHeaderOn = 130; } |
Часовой пояс GMT +3, время: 17:10. |