媒体查询元素上的 JQuery

Question

 <div class = "header>
</div>

.header{
position:relative
color:green;
}

@media only screen and (max-width : 400px) {
.header{
position:fixed
color:blue;
}
}

我有一个相对定位的 div，在媒体查询中我将其更改为固定。我现在正在尝试定位媒体查询 div，但它正在修改原始 div。有什么建议么？我的尝试是让 JS 检查屏幕宽度，但这没有用。

只是为了澄清，我希望我的 Javascript 申请媒体查询 div header 。

if(screen.width<400){
        console.log('yes');
    $(window).scroll(function(){
        $(".header").css("top", Math.max(0,30 - $(this).scrollTop()));
    });}

Answer 1

好吧，让我澄清一下...您没有 2 个 div。你有 1 个 div 并且浏览器应用指示的样式......即:当屏幕很大时，它应用常规样式:

.header{
    position:relative
    color:green;
}

当您使用移动设备时，它适用:

@media only screen and (max-width : 400px) {
    .header{
        position:fixed
        color:blue;
    }
}

它们都作用于完全相同的东西.. 只是样式规则不同。所以你不能“定位”一个或另一个，因为它们是完全相同的元素。如果您可以将其放入 jsfiddle 或 codepen 中进行复制，那么查看您拥有的内容会更容易。

如果您只是想覆盖媒体查询样式，那么您正在做的应该可行，或者使用 getComputedStyle(element).[property]