Question

我有一些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继续在任何设备上滚动。

Answer 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>

使用CSS覆盖@media的jQuery样式

1 个答案: