자바스크립트 미디어쿼리 질문

안녕하세요 다들 좋은 아침입니다 ..! 

모바일 페이지를 그누보드 mobile 사용이 아닌

제가 meida query로 사용해서 처리를 하고 있는데

scrollTop을 사용하니 모바일에서 인식을 못하는것 같습니다 ㅠㅠ

혹시 이럴때 따로 사용 하는 방법이 있나요 ?

현재 만드려는게 자바스크립트를 사용해서

scroll 할때마다 css 요소들을 건드릴려고 합니다

if(matchMedia("screen and (min-width:1200px").matches){

    $(window).on('scroll', function () {

        console.log($(window).scrollTop());

        if ($(window).scrollTop() > 10) {

            $('.main__content_banner-container').css("opacity", "1");

        }

        if ($(window).scrollTop() > 400) {

            $('.text-break').css("opacity", "1");

        }

        if ($(window).scrollTop() > 500) {

            $(".business-banner__container").css("transform", "translateY(0px)");

        }

        if ($(window).scrollTop() > 100) {

            $('.header-container').css("height", "50px");

            $('.header-container__logo-img').css("height", "55px");

            $('.header-container__logo-img').css("background-size","contain");

            $('.header-container__logo-img').css("background-repeat","no-repeat");

        } else {

            $('.header-container').css("height", "83px");

            $('.header-container__logo-img').css("height", "100%");

        }

        if ($(window).scrollTop() > 1100) {

            $('.text-break2').css("opacity", "1");

        }

    });

}else if(matchMedia("screen and (max-width:720px").matches){

    console.log($(window).scrollTop() );

    if ($(window).scrollTop() > 10) {

        $('.main__content_banner-container').css("opacity", "1");

    }

}