On Scroll - Add Class - For every element on the page

Question

I am trying to add a class to the body of my page whenever an element called .swapbg-dark comes into the viewport.

Here is my current code. I have managed to make it work for one of the elements, but when it scrolls past the second it does not retrigger and then removes the class.

JSfiddle here: https://jsfiddle.net/4xpwaq2g/

$.fn.isInViewport = function() {
      var elementTop = $(this).offset().top + 300;
      var elementBottom = elementTop + $(this).outerHeight();

      var viewportTop = $(window).scrollTop();
      var viewportBottom = viewportTop + $(window).height();

      return elementBottom > viewportTop && elementTop < viewportBottom;
    };

    $(window).on('resize scroll', function() {
      $('.swapbg-dark').each(function() {
        if ($('.swapbg-dark').isInViewport()) {
          $('body').addClass('dark-theme');
        } else {
          $('body').removeClass('dark-theme');
        }
      });
    });

Obzi · Accepted Answer · 2020-07-16 15:42:11Z

2

Here is for you :

$(window).on('resize scroll', function() {
  var found = false;
  $('.swapbg-dark').each(function() {
    found = found || $(this).isInViewport();
  });
  if (found) {
    $('body').addClass('dark-theme');
  } else {
    $('body').removeClass('dark-theme');
  }
});

answered Jul 16, 2020 at 15:42

Obzi

2,3901 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SpoonMeiser Over a year ago

Would it make more sense to use .filter instead of .each and an external variable?

Obzi · Accepted Answer · 2020-07-16 16:11:56Z

0

As say @SpoonMeiser , you can do this too :

$(window).on('resize scroll', function() {
  var found = $('.swapbg-dark').filter(function() {
      return $(this).isInViewport();
    }).length !== 0;
  if (found) {
    $('body').addClass('dark-theme');
  } else {
    $('body').removeClass('dark-theme');
  }
});

answered Jul 16, 2020 at 16:11

Obzi

2,3901 gold badge12 silver badges23 bronze badges

1 Comment

Obzi Over a year ago

You can even remove the found variable.

Collectives™ on Stack Overflow

On Scroll - Add Class - For every element on the page

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related