重写jQuery的造型与CSS的@media

我有一个定位工具栏菜单中的一些jQuery脚本与屏幕向下滚动：在平板电脑上放大时重写jQuery的造型与CSS的@media

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

来源

2013-05-17 JKD

我认为你的JS会覆盖你的CSS，即使它！重要。 – AJak

Javascript增加了内联样式，'！important'覆盖了内联样式，除非它们是'！important'，所以这可能不是问题。 – adeneo

你可以设置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>

来源

2013-05-17 21:20:38 Vector

恐怕没有用。在移动设备上查看时，jQuery仍然会启用。我也尝试改变宽度值> 900. – JKD

你可以尝试替换if（$（window）.width（）> 759）{'with'if（matchMedia（'only screen and（max-width：480px）' ）.matches）{' – Vector

禁用移动版和桌面版浏览器中的脚本... – JKD

重写jQuery的造型与CSS的@media

回答

相关问题