检测媒体显示更改时更改JavaScript脚本

Question

我想知道是否有人可以帮助我修改此脚本以响应特定的媒体显示尺寸：

<script>
        $(window).on('scroll' , function(){
            var windowTop = $(window).scrollTop();
            if(windowTop > 40){
                $('.menu_sup').css({'position':'fixed','height': '0px'});
                $('.menu').css({'position':'fixed','top':'0px'});
            }else{
                $('.menu_sup').css({'position':'fixed','height': '39px'});
                $('.menu').css({'position':'fixed','top':'41px'});
                $('.content').css({'top':'140px'});
            }
        });
</script>

我在w3schools.com上看到了以下内容：

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

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

我有办法将两种代码组合成一个或类似的东西来执行这些更改吗？

谢谢