Как включать функции в js на определенных размерах экранов?

Question

[angelzzz]

Верстаю макет, у которого есть элементы, которые должны фиксировать свое положение при прокрутки к ним. Есть несколько вопросов:
1. как отключить работу этих функций на страницах, где этих элементов нет? Иначе появляется ошибка и после него код не выполняется
2. как сделать чтобы для разных размеров экранов эти блоки фиксировались при разных обстоятельствах? например на мобиле он фиксируется при достижении блока container, а на десктопе при достижении блока menu

Answer 1

[iBird Rose]

чтобы скрипт выполнялся только если мы на той странице:

if ( $('блок который нужно проверить').length > 0 ) {
	//тут выполняешь скрипт
}

проверка размера экрана

if ( $(window).width() > 768 ) {
	//код
}

Comments

[angelzzz]

спасибо! то, что нужно!

[angelzzz]

еще вопрос: скрипты по разному ведут себя на разных размерах экранов, но если изменить размер экрана, например с 1200 до 768, то все значения (offsetTop, height) считаются ка для размера 1200. Это можно как-то изменять при изменении экрана?

[iBird Rose]

angelzzz: можно. повесить все свои скрипты в (window).resize(function, но не советую. это сильно нагрузит страницу. скрипты будут отрабатывать при каждом пикселе ресайза. так как пользователь не ресайзит страницу, а просматривает на том разрешении на котором он его открыл - лучше оставить как есть.

[angelzzz]

iBird Rose: загрузить страницу для всех или только для тех, кто ресайзит?

[iBird Rose]

angelzzz: кароч вообще ничего не ресайз не вешай. то что ты описал - это не проблема. это нормальное явление. и при перезагрузке страницы все встанет на свои места

[angelzzz]

iBird Rose: заказчик все-таки готов пожертвовать производительностью и скоростью во имя красивости при дёргании мышкой окна туда-сюда :(

[iBird Rose]

angelzzz: ну вешай тогда скрипты на window resize

[angelzzz]

iBird Rose: offset.top не перерасчитывает

[iBird Rose]

angelzzz: че эт? https://jsfiddle.net/uvjhxfe0/