Question

我有以下JS，它与elem 1完美配合但由于某种原因它不适用于其余元素（elem2，elem3，elem4）。我试图找到代码中的错误在哪里，但我没有任何线索在哪里是错误。

代码背后的想法是......当你向下滚动时它应该添加一个新类，你会看到ID所在的div。

我无法解决问题是什么？有什么帮助解决它吗？

由于

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>

Answer 1

你在第一次拥有“fadeInUp”类后返回，这意味着没有其他人被检查过。

 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');
     }
}

为什么我的JS只适用于1个元素？

1 个答案: