RogerHN RogerHN - 3 months ago 22
CSS Question

How to apply javascript to more than one class?

I am using bootstrap tabs and inside I have a div with a class called

img-parallax
and an h1 element. After that I have a div with a class called content.

What I did was create a parallax effect on the
img-parallax
class and the h1, and the content after it move over it using a function called ScrollBanner.

The problem is that this effect only works on the first tab, if I switch to the second tab it doesn't work. Even selecting the classes with the javascript code.

The only way that I made it works was duplicating the function that do the parallax effect and using another class like
img-parallax2.


I already tried:


  • Change the class to an id.

  • Use a comma to select multiple classes in the javascript function like this:

    var headerText = document.querySelector('.img-paralax, .imgparalax2');

  • Changing the
    document.querySelector
    to
    document.querySelectorAll
    and it didn't worked too.



And it didn't worked.

I don't want to use the duplicated function, I want to use one for every element that uses the class
.img-paralax.


Here is the code with everything working with the javascript function duplicated:

Example html code:

<div class="img-paralax">
<h1>Sample Title</h1>
</div>
<div class="content">
<p>Content Here</p>
</div>


The css:

.img-paralax {
background-image: url('https://placehold.it/1920x1080.png');
background-size: cover;
background-position: center;
width: 100%;
position: fixed;
height: 500px;
}

.img-paralax h1 {
text-align: center;
color: #fff;
text-shadow: 2px 2px 1px #000;
font-family: 'Arial';
letter-spacing: 20px;
font-size: 50px;
font-weight: 900;
padding: 0;
line-height: 452px;
margin: 48px 0px 0px;
text-transform: uppercase;
}
.content {
position: relative;
top: 500px;
padding: 10px 20px;
background: #fff;
height: 1500px;
}


And the javascript:

function scrollBanner() {
var scrollPos;
var headerText = document.querySelector('.img-paralax');
scrollPos = window.scrollY;

if (scrollPos <= 400) {
headerText.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";
}
}

window.addEventListener('scroll', scrollBanner);

function scrollBannerText() {
var scrollPosText;
var headerTextH1 = document.querySelector('.img-paralax h1');
scrollPosText = window.scrollY;

if (scrollPosText <= 400) {
headerTextH1.style.transform = "translateY(" + (-scrollPosText/3) +"px" + ")";
headerTextH1.style.opacity = 1 - (scrollPosText/400);
}
}

window.addEventListener('scroll', scrollBannerText);

Answer

You do need to use querySelectorAll but should keep in mind that it returns HTMLCollection not a single node. For example you can use Array.prototype.forEach to iterate over all nodes matching selector. Demo.

function scrollBanner() {
  var scrollPos = window.scrollY;

  if (scrollPos <= 400) {
     [].forEach.call(
        document.querySelectorAll('.img-paralax, .img-paralax2'),
        function(node) {
          node.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";
        }
    );
  }
}

You can actually use single handler to do the job

function scrollBanner() {
  var scrollPos = window.scrollY;

  if (scrollPos <= 400) {
     [].forEach.call(
        document.querySelectorAll('.img-paralax, .img-paralax2'),
        function(node) {
          node.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";

          var text = node.querySelector('h1');
          text.style.transform =  "translateY(" + (-scrollPos/3) +"px" + ")";
          text.style.opacity = 1 - scrollPos/400;

        }
    );
  }
}