如何在javascript中执行css媒体查询等效

-1

我想要更改下面的javascript，以便如果屏幕分辨率为768px或更低，header_height变量会减少到50而不是100，否则它会保持在100.谢谢提前一切协助！如何在javascript中执行css媒体查询等效

<script> 
 
$(window).scroll(function() { 
 
\t  var elem = $('.header'); 
 

 
\t  var header_height \t = 100; 
 
\t \t var header_top \t \t = elem.offset().top; 
 
\t \t var current_top \t \t = $(this).scrollTop(); 
 

 
\t  if (current_top > header_height && !elem.hasClass('fixed')) 
 
\t \t { 
 
\t  \t elem.addClass('fixed'); 
 
\t \t \t $('body').addClass('fixed-padding'); 
 
\t  } 
 
\t  else if(current_top <= header_height && elem.hasClass('fixed')) 
 
\t \t { 
 
\t  \t elem.removeClass('fixed'); 
 
\t \t \t $('body').removeClass('fixed-padding'); 
 
\t \t } 
 
\t }); 
 
</script>

来源

2017-09-13 siaeva

你可以使用window.innerWidth窗口宽度，并与三元运营商结合这个设置的header_height值：

var header_height = (window.innerWidth <= 768) ? 50 : 100;

值得一提的是，为了正确地检测用户的窗口的变化，你正如Soviut的回答所建议的那样，还应该与onresize事件挂钩。

来源

2017-09-13 18:59:04 BenM

使用window.resize事件，而不是scroll事件来运行你的支票。当手机浏览器改变方向（人像变为风景等）时，resize事件将触发。

$('window').on('resize', function() { 
    // do size checks here 
});

值得一提的是，resize事件火灾大多数浏览器上非常频繁，所以你可能会想“反跳”了。此外，您还应该将resize事件处理函数的以外的查询选择器缓存在之外。每次调整大小事件触发时，您都不希望它一遍又一遍地重新选择相同的元素。

来源

2017-09-13 18:57:43 Soviut

如何在javascript中执行css媒体查询等效

回答

相关问题