How to apply javascript to more than one class?

Question

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 1

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;

        }
    );
  }
}