使用 @media 的 CSS 覆盖 jQuery 样式答案

【问题标题】：Overriding jQuery styling with CSS for @media使用 @media 的 CSS 覆盖 jQuery 样式
【发布时间】：2013-05-18 05:20:38
【问题描述】：

我有一些 jQuery 脚本可以放置一个侧边栏菜单以随屏幕向下滚动：

<head>    
<script type="text/javascript">
    jQuery(function($) {
    function fixDiv() {
      if ($(window).scrollTop() > 365)
        { 
        $('#Portfolio-Sidebar-Content-Web').css({'position': 'fixed', 'top': '0', 'margin-top': '20px'}); 
        }
      else
        {
        $('#Portfolio-Sidebar-Content-Web').css({'position': 'static', 'top': 'auto', 'margin-top': '0'});
        }
    }
    $(window).scroll(fixDiv);
    fix5iv();
    });
    </script>
</head>

这在桌面上工作得很好，但在平板电脑和移动设备上缩放时表现不同，因为 div 固定在屏幕上并与内容重叠。

这是我希望@media 查询在平板电脑或移动设备上启动并以不同方式定位 div 的地方，覆盖 jQuery 脚本应用的样式：（@media 样式放置在我的最底部样式表）

@media only screen and (max-device-width: 480px) {
    #Portfolio-Sidebar-Content-Web{
        position: fixed !important;
        top: 0px !important;
        }
}

但是这段代码对我不起作用：/ jQuery 样式似乎总是会覆盖我应用的任何 css 定位，并且 div 会继续在任何设备上滚动。

【问题讨论】：

我认为你的 JS 会覆盖你的 CSS，即使它 !important 。
Javascript 添加内联样式，!important 覆盖内联样式，除非它们也是 !important，所以这可能不是问题。

标签： jquery css media-queries

【解决方案1】：

您可以将jquery设置为仅在您需要的屏幕尺寸时才生效；

<script type="text/javascript">
    jQuery(function($) {
    if ( $(window).width() > 759) {
    function fixDiv() {
      if ($(window).scrollTop() > 365)
        { 
        $('#Portfolio-Sidebar-Content-Web').css({'position': 'fixed', 'top': '0', 'margin-top': '20px'}); 
        }
      else
        {
        $('#Portfolio-Sidebar-Content-Web').css({'position': 'static', 'top': 'auto', 'margin-top': '0'});
        }
    }
    $(window).scroll(fixDiv);
    fix5iv();
    }
    });
    </script>

【讨论】：

恐怕这行不通。在移动设备上查看时，jQuery 仍然有效。我还尝试将宽度值更改为 > 900。
您可以尝试将if ( $(window).width() > 759) { 替换为if (matchMedia('only screen and (max-width: 480px)').matches) {