Jquery scroll to appear mobile view/media queries -

im using below jquery function make items appear 1 after other when scrolling on website (http://pitchandtoss.co.uk/ourstory.html) works great when viewed on mobile doesn't work @ because amount of pixels change on smaller screen. there can add media query maybe change amount of pixels on scroll function when viewed on mobile? in advance.

$(window).scroll(function() {     if ($(this).scrolltop() == 0) {         $("#mydiv:visible").hide();     }     else {         $("#mydiv:hidden").show();     } });