javascript - 如何更换背景附件:fixed on Mobile?

Question

我的网站上有多个部分在背景上提供“视差”风格效果，这在许多移动平台上都被禁用。

我想使用一些 jQuery 或 javascript 来替换样式的所有实例 "background-attachment:fixed"对于 "background-attachment: scroll" .

我不喜欢手动更新每个位置(这是一个巨大的元素)，我很高兴在移动设备上失去视差效果并退回到 background-size: cover

没有发布任何代码，因为我不确定从哪里开始。

Answer 1

如果所有这些元素共享相同的类名，比如 bg，那么它可能是这样的:

JS:JS Fiddle 1 - 我忘记了纯 javascript 中的 for 循环

if(isMobile) {
    var backgrounds = document.getElementsByClassName('bg');

    for(var i in backgrounds){
        backgrounds[i].style.backgroundAttachment = 'scroll';
    }
}

jQuery:JS Fiddle 2

if(isMobile) {
    $('.bg').css({'background-attachment':'scroll'});
}

• 请注意，isMobile 可能是您触发的变量 true 如果它是移动的，具体取决于 userAgent 或窗口宽度