CODEWITHSUNDEEP
javascriptjquery
user5638822
user5638822

Reputation:

Why my JS is only working for 1 element?

I have the following JS, it is perfectly working with the elem 1 but for some reason it doesn't work with the rest of elements (elem2,elem3,elem4). I am trying to find where is the error in the code but I don't have any clue where is the bug.

The idea behind the code is.. it should ADD a new class when you scroll down and you see the div where the ID is.

I can't undestand what is the problem? Any help to fix it please?

Thanks

function isElementInViewport(elem) {
  var $elem = $(elem);
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();
  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function checkAnimation() {
  var $elem1 = $('#hintro');
  var $elem2 = $('#hpro');
  var $elem3 = $('#hcontact');
  var $elem4 = $('#hquote');

  if ($elem1.hasClass('fadeInUp')) return;
  if (isElementInViewport($elem1)) {
    $elem1.addClass('fadeInUp');
  }
  if ($elem2.hasClass('fadeInLeft')) return;
  if (isElementInViewport($elem2)) {
    $elem2.addClass('fadeInLeft');
  }
  if ($elem3.hasClass('fadeInRight')) return;
  if (isElementInViewport($elem3)) {
    $elem3.addClass('fadeInRight');
  }
  if ($elem4.hasClass('fadeInUp')) return;
  if (isElementInViewport($elem4)) {
    $elem4.addClass('fadeInUp');
  }
}
// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});
<body>
  <div id="hintro" class="col-12 animated">test1</div>
  <div id="hpro" class="col-12 animated">test2</div>
  <div id="hcontact" class="col-12 animated">test3</div>
  <div id="hquote" class="col-12 animated">test4</div>
</body>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Upvotes: 0

Views: 99

Answers (1)

Michael Hudson
Michael Hudson

Reputation: 1340

You're returning after the first has the class 'fadeInUp' which means none of the others get checked.

 function checkAnimation() {
     var $elem1 = $('#hintro');
     var $elem2 = $('#hpro');
     var $elem3 = $('#hcontact');
     var $elem4 = $('#hquote');

     if (!$elem1.hasClass('fadeInUp') && (isElementInViewport($elem1)) {
        $elem1.addClass('fadeInUp');
     }
     if (!$elem2.hasClass('fadeInLeft') && (isElementInViewport($elem2)) {
        $elem2.addClass('fadeInLeft');
     }
     if (!$elem3.hasClass('fadeInRight') && (isElementInViewport($elem3)) {
        $elem3.addClass('fadeInRight');
     }
     if ($elem4.hasClass('fadeInUp') && (isElementInViewport($elem4)) {
        $elem4.addClass('fadeInUp');
     }
}

Upvotes: 1

Related Questions