스크롤 제이쿼리가 실행이 되는데 f5를 눌러주어야만 작동됩니다 채택완료

<script>

$(document).ready(function(){
if (matchMedia("screen and (max-width: 800px)").matches) {
    window.onscroll = function() {scrollFunction('.main_menu')};
    function scrollFunction() {
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementsByClassName("main_menu")[0].style.height = "65px";
        document.getElementsByClassName("i_call")[0].style.top = "20px";

      } else {
        document.getElementsByClassName("main_menu")[0].style.height = "116px";
        document.getElementsByClassName("i_call")[0].style.top = "41px";

      }
    }
}
});
</script>

반응형입니다.

동작이 되는데 창의 크기에 변화를 줄때 자동적으로 실행되지않고 그전 쿠키가 그대로 나옵니다.

f5를 눌러주어야만 실행이 되는데 왜 이런 문제가 생기는 걸까요?

어떻게 해결할 수 있을까요?