Как запускать функции в зависимости от разрешения экрана и выключать предыдущие при ресайзе?

Question

[angelzzz]

Пытаюсь в зависимости от размера экрана запускать разные функции. Чтобы результаты вычислений не влияли друг на друга, хотелось бы выключать их.

Вот пример кода https://jsfiddle.net/eqcxwddd/9/. Если посмтореть в консоле то видно, что сначала при ресайзе окна запускается одна функция, но если окно достигнет другого брейкпоинта, то запускается друга и они ВМЕСТЕ работают. И так же если дойти до третьего брейкпоинт. Мне нужно чтобы при достижении брейкпоинта все функции отключались и работала только та, которая должна работать.

Вот код:

function sticker1220() {  
	$(window).on("load resize scroll",function(){
		console.log('sticker1220');
    });
};

function sticker950() { 
	$(window).on("load resize scroll",function(){
		console.log('sticker950');
    });
};

function sticker320() { 
	$(window).on("load resize scroll",function(){
		console.log('sticker320');
    });
};

function checksize() {

	if ( $(window).width() > 1220 ) {
		sticker1220();
	} else if ( $(window).width() > 640 & $(window).width() < 1219 )  {
		sticker950();
	} else if ( $(window).width() < 639 ) {
		sticker320();
	}
};

checksize();
$(window).resize(function() {
checksize();
$('p').text($(window).width());
});

Answer 1

[R-Oscar]

Если я всё правильно понял, Вам нужно что-то вроде этого

Comments

[angelzzz]

к сожалению, не то, что нужно :( пока решил тем, что все тригеры из функций убрал в checksize, вроде работает, но мне кажется не идеальное решение

Answer 2

[Евгений]

- Написать разные функции
- Отловить событие ресайза, узнать ширину страницы
- В зависимости от ширины выполнить функцию
- профит

Я только не понял в примере кода, зачем еще какие-то триггеры внутри функций?
Так работает же норм

function sticker1220() {
		console.log('sticker1220');
};

function sticker950() { 
		console.log('sticker950');
};

function sticker320() { 
		console.log('sticker320');
};

function checksize() {
	if ( $(window).width() > 1220 ) {
		sticker1220();
	} else if ( $(window).width() > 640 & $(window).width() < 1219 )  {
		sticker950();
	} else if ( $(window).width() < 639 ) {
		sticker320();
	}
};

checksize();
$(window).resize(function() {
checksize();
$('p').text($(window).width());
});

Comments

[angelzzz]

функция закрепляет меню вверху страницы при прокрутке. Нужно не просто выводить текст в консоли, а при ресайзе окна при прокрутке прикреплять меню, для этого и нужны остальные тригеры, без них в консоль выводится то, что нужно, но вот стикер не срабатывает когда это нужно. На ресайз триггер для того чтобы если кто-то играется окошоком, но у него всегда прикреплялся стикер правильно. Почему он может прикреплять неправильно? Потому что высота стикера, момент его закрепления, его местоположение меняется в зависимости от размера экрана. Вот полный код без html/css (их просто очень трудно перенести сюда) https://jsfiddle.net/eqcxwddd/6/

[Евгений]

Меню обычно закрепляется через добавление класса, который открепляет блок навигации от родительского блока, ставит position: fixed и top: 0; left: 0; right: 0

Высоту любого элемента получать по факту при обработке события, с отступами так же.

[Евгений]

- отловили скролл
- проверяем на нужную высоту
- проверяем наличие стикер-класса
- если его нет, добавляем
- если есть, ничего не делаем
- если высота не подходит, проверяем наличие стикер-класса
- если его нет, ничего не делаем
- если есть, убираем класс