How to replace Background-attachment:fixed on Mobile?

Question

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.

Would you be open to using css media queries to disable the effect based on screen size? — Hybrid, Jan 23 '16 at 19:36
I would but to do this I would need to create a media query for each possible variation - there are over 100 across the whole project. I saw JS as being a one line way to disable the effect. — , Jan 23 '16 at 19:46

Mi-Creativity · Accepted Answer · 2016-01-23T23:09:17.727

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

Note that isMobile is presumably a variable you trigger true if it is mobile depending on userAgent or window width

score 0 · Answer 2 · answered Jan 23 '16 at 20:42

You could do something like

if (!window.matchMedia("(min-width: 800px)").matches) {  
    var items = document.getElementsByClassName("some_class");
    for (var i = 0; i < items.length; ++i) {
      var item = items[i];
      if (item.style.backgroundAttachment == "fixed") {
          item.style.backgroundAttachment = "scroll";
      }
    }
}

I have not tested this, and I suspect it won't work for your problem because you don't have one class name. You could also run it on all divs or something.

score 0 · Answer 3 · answered Jan 23 '16 at 20:56

Snippet below

//find all elements
var elements=document.body.querySelectorAll('*');
//loop through all elements
for(var i=0;i<elements.length;++i){
  //find the inline or css style for each element
element_style=window.getComputedStyle(elements[i],null)||elements[i].currentStyle;
//if style matches fixed change style
  if(element_style.backgroundAttachment=='fixed'){
console.log(element_style.backgroundAttachment)
elements[i].style.backgroundAttachment='scroll';
    //alert box that show style has been changed
alert('this div background is now '+ element_style.backgroundAttachment)
}

}

div{
  background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQARVdhCSrk0o1t6uon-TqIJYit7b6unGWMn_zJu2Tg0LkoEi4Kpg');
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size:50px;
  border:solid;
  width:500px;
  height:100px;
  overflow:scroll;

}

<div>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
</div>

<div>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
</div>
<div>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
Something here <br>
</div>

How to replace Background-attachment:fixed on Mobile?

3 Answers3