如果有人向下滚动页面，我正在使用以下代码更改 thead css
$(document).ready(function()
{
$("#results").scroll(function ()
{
var top = $("#results").scrollTop();
if (top > 25)
{
$("thead").css({ 'position':'fixed', 'bottom':'120px', 'width':'95%', 'margin':'2.5%'});
}
}
}
我想使用媒体查询根据屏幕大小更改 css。例如“头”是:
$("@media all and(max-width: 1980px)").{("thead").css({ 'visibility':'hidden' })};
html代码是:
...
<table id="demoTable">
<thead>
<tr id="stayontop">
<th> sth </th>
<th> sth </th>
<th> sth </th>
<th> sth </th>
</tr>
</thead>
</table>
...
我的问题是媒体查询不工作...
最佳答案
如果您希望当屏幕尺寸小于特定宽度时 thead 标签消失，您可以在您的 css 文件中使用媒体查询:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<style>
@media screen and (max-width: 1024px) {
thead {visibility:hidden; }
}
</style>
</head>
<body>
<table id="demoTable">
<thead>
<tr id="stayontop">
<th> sth </th>
<th> sth </th>
<th> sth </th>
<th> sth </th>
</tr>
</thead>
</table>
</body>
</html>
在这种情况下，thead 在 1024 屏幕宽度上消失
如果您愿意，可以使用 jQuery 解决方案。
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() < 1024) {
$("thead").css("visibility", "hidden");
}
})
</script>
在这种情况下，我建议您观看此页面可能会有用 http://ryanve.com/lab/dimensions/
关于javascript - 将 @media 查询与 javascript 结合使用以动态更改 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24058535/