我想知道是否有人可以帮助我修改此脚本以响应特定的媒体显示尺寸:
<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
我有办法将两种代码组合成一个或类似的东西来执行这些更改吗?
谢谢