Как выполнить скрипт при экране меньше 500px?

Question

[Алексей]

Доброго времени суток!
Помогите доделать скрипт, чтобы он работал только при размере экрана до 500px.

var vote1 = $('.vote1'),
	scrollPrev = 0;

$(window).scroll(function() {
	var scrolled = $(window).scrollTop();
 
	if ( scrolled > 100 && scrolled > scrollPrev ) {
		vote1.addClass('out');
	} else {
		vote1.removeClass('out');
	}
	scrollPrev = scrolled;
});

Answer 1

[crawstein]

function myFunction(x) {
  if (x.matches) { // If media query matches
   var vote1 = $('.vote1'),
  scrollPrev = 0;

$(window).scroll(function() {
  var scrolled = $(window).scrollTop();
 
  if ( scrolled > 100 && scrolled > scrollPrev ) {
    vote1.addClass('out');
  } else {
    vote1.removeClass('out');
  }
  scrollPrev = scrolled;
});
  } 
}

var x = window.matchMedia("(max-width: 500px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

p.s.

Подогнал твой код в пример с интернета, работоспособность не тестил)
Надеюсь, поможет

Answer 2

[Alexander Sharomet]

Пример не самый лучший. Нашёл в инете, засунул туда твой скрипт. Тут не хватает пару проверок:
Проверки если скрипт уже проинициализирован и изначальный размер экрана.

let scriptInit = true;
$(window).resize(function() {
  $(this).width() > 500 ? scriptInit = true : scriptInit = false;
});
$(window).scroll(function() {
  if(scriptInit) {
   /* Your Script ... */
    var scrolled = $(window).scrollTop();
    if ( scrolled > 100 && scrolled > scrollPrev ) {
      vote1.addClass('out');
    } else {
      vote1.removeClass('out');
    }
    scrollPrev = scrolled;
  }
});

Answer 3

[Алексей]

Первый вариант рабочий спасибо. Еще вопрос, не могу убрать элемент, который появляется в мобильной версии сайта при нажатии на кнопку поделиться.