Как использовать медиа-запрос с jquery ⇐ Javascript

[Anonymous]

У меня есть значок контакта в правом нижнем углу страницы, который исчезает, когда пользователь находится в пределах 300 пикселей от нижней части страницы, и не закрывает никакой информации в нижнем колонтитуле. Проблема в том, что нижний колонтитул выше на мобильных устройствах, поэтому мне нужно изменить размер с 300 пикселей на 500 пикселей на экранах ниже 768 пикселей.

Код: Выделить всё

jQuery(document).ready(function($) {
$(document).on('scroll', function() {
var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());

if(distanceFromBottom < 300) {
$('#contact-fixed').fadeOut();
$('.circular-text').fadeOut();
} else {
$('#contact-fixed').fadeIn();
$('.circular-text').fadeIn();

}
});
});

Попробовал это, но это не работает:

Код: Выделить всё

jQuery(document).ready(function($) {
function mediaSize() {
if (window.matchMedia('(min-width: 768px)').matches) {
$(document).on('scroll', function() {
var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());

if(distanceFromBottom < 500) {
$('#contact-fixed').fadeOut();
$('.circular-text').fadeOut();
} else {
$('#contact-fixed').fadeIn();
$('.circular-text').fadeIn();

}
});
}}
});

Подробнее здесь: https://stackoverflow.com/questions/797 ... ith-jquery