javascriptjqueryhtmlcssbackground-attachment

How to replace Background-attachment:fixed on Mobile?

I have various sections on my website that offer a "parallax" style effect on backgrounds, this is disabled on many mobile platforms.

I wanted to use some jQuery or javascript to replace all instances of the style "background-attachment:fixed" for "background-attachment: scroll".

I am not keen to update every location manually (Its a huge project) and I am happy to lose the Parallax effect on mobile and fall back to background-size: cover

Not posted any code as I am unsure where to start with this.

Solution

  • if all of these elements share same class name, say bg, then it could be something like this:

    JS: JS Fiddle 1 - I forgot about the for-loop here in pure javascript

    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'});
}