[Resolved] Apply class on scroll using JS

[Adrian]

Hi,

I’m trying to get a section of the page to invert its colours when scrolling.

I’m not sure if the approach I’m using is the right one, but I was hoping to get some help on this.

The idea is to apply a new class to a div when the user has scrolled a certain amount down the page, using JS.

To do this I’ve created a new footer element hook, which is applied site wide and contains the following:

<script>
$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('.inverted-section').addClass('invert-colors');
    } else {
       $('.inverted-section').removeClass('invert-colors');
    }
});
</script>

I’ve added to the Generate Blocks container the CSS class inverted-section, and added in Additional CSS the values I want to apply to the existing container once the user has scrolled down:

.invert-colors{
filter: invert(100%);
}

However the scroll event doesn’t seem to be applying the new class to the existing element. Clearly I’ve done something wrong.

Thank you in advance

[Fernando]

Hi Adrian,

This would be out of our scope of support, however here’s a quick JS code I wrote to help:

<script>
  const invertedsec = document.getElementsByClassName("inverted-section");
window.addEventListener("scroll", () => {
if (window.scrollY > 50) {
     for (var i = 0; i < invertedsec.length; i++) {
       invertedsec[i].classList.add('invert-colors');
     }
  } else {
    for (var i = 0; i < invertedsec.length; i++) {
       if (invertedsec[i].classList.contains('invert-colors')) {
        invertedsec[i].classList.remove('invert-colors');
      }
     }
}
});
  </script>

Tested it and it’s working on my end.

[Adrian]

Hi Fernando,

I appreciate that you took the time to write a JS code even though it is outside the spectrum of your support.

While I haven’t gotten it to work yet, you’ve pointed me in the right direction.

If at some point you have time to get back to me that would be great, though if you can’t of course I’ll understand. In the meantime, I will continue to investigate what the problem might be.

When trying to add the class, it throws the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'add')

While when it wants to remove it it shows the following: Uncaught TypeError: Cannot read properties of undefined (reading 'contains')

I’ll be back here with an update if I can get it to work.

Thanks a lot.

[Fernando]

That’s odd. Can you try adding console.log(invertedsec); to see if the element is not null?

Example:

<script>
  var invertedsec = document.getElementsByClassName("inverted-section");
	console.log(invertedsec);
window.addEventListener("scroll", () => {
if (window.scrollY > 50) {
     for (var i = 0; i < invertedsec.length; i++) {
       invertedsec.classList.add('invert-colors');
     }
  } else {
    for (var i = 0; i < invertedsec.length; i++) {
       if (invertedsec.classList.contains('invert-colors')) {
        invertedsec.classList.remove('invert-colors');
      }
     }
}
});
  </script>

Try setting the priority of the Hook Element to something higher as well, like 99999.

[Adrian]

Hi Fernando,

I finally got it to work the way I wanted it to. However, I had to use a different approach.

For some reason it didn’t work using a div class. I only managed to get it to work using a div id.

So the final code looks like this:

<script>
window.onscroll = function() {invertedsec()};
function invertedsec() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("inverted-section").classList.add('invert-colors');
  } else {
document.getElementById("inverted-section").classList.remove('invert-colors');
  }
}
</script>

I have added inverted-section as HTML anchor value to the Generateblocks container and I have added to the Additional CSS section of the WordPress customizer the desired values for the invert-colors class.

Thank you very much for your help, as you have pointed me in the right direction to achieve the desired effect.

[Fernando]

You’re welcome Adrian! Glad you got it to work!

[Author]

Posts