addClass被添加到所有DIV，无论它们的位置如何（视口）

Question

我为我的问题搜索了一个解决方案，但我没有找到任何答案。

这是问题所在，我正在为许多DIV使用animate.css，但我希望当元素 - 其中“动画”类和“animate.css中的动画” - 在视口中时，动画才会生效。我的问题是，无论位置如何，类'动画'和'animate.css中的动画'都被添加到我的所有DIV中。

脚本

$(function() {
"use strict";
  $(window).scroll(function() {
    addClassToElementInViewport($('div.accueilText'), "slideInleft");
    addClassToElementInViewport($('div.ateHT'), "slideInLeft");
  });

  function addClassToElementInViewport(element, newClass) {
    if (isVisible(element)) {
      element.removeClass('hidden');
      element.addClass(newClass);
    }
  }

function isVisible($el) {
  var winTop = $(window).scrollTop();
  var winBottom = winTop + $(window).height();
  var elTop = $el.offset().top;
  var elBottom = elTop + $el.height();
  return ((elBottom<= winBottom) && (elTop >= winTop));
}

});

html代码

    <div class="container">
      <div class="row text-center accueilText hidden animated">
        <div class="col-md-6 col-md-offset-3">blablabla bla bla<br>bla<br>blabla bla  </div>
      </div>
      <hr>

      <div class="row">
        <div class="col-lg-12"><center><img class="img-responsive" src="Images/verin_hydroseb.png" alt="Hydroseb logo"></center></div>
      </div>
      </div>

<div class="row">
    <div class="text-justify col-sm-5 ateHT hidden animated"> <br>bla bla blabllabla </div>
    <div class="col-sm-5 col-sm-offset-2 ateHI hidden animated"> <img class="img-responsive" src="Images/atelier_hydraulique.png" alt="HydroSeb Hydraulique"></div>

  </div>

我非常感谢您提供的任何帮助:)

Answer 1

$（'div.accueilText'）这将找到所有具有类accueilText的div

但我觉得你可能在寻找这个。

首先，on-screen visible area称为Viewport。

  

（图片取自OP。在 Photoshop 中清除并编辑）

所以你需要的只是检测Viewport中的所有元素。

这可以使用jQuery的许多插件来实现，但我会在一个例子中解释你，它被称为jQuery withinviewport

关于[ withInViewport - Github ]

的来源和文档的链接

第1步：

下载插件并在脚本中加入jQuery框架和withinviewport插件：

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>

第2步：

scroll事件的初始化函数：

$(window).bind("scroll", function() {
    //your code placeholder
});

第3步：

使用withinviewport选择器获取Viewport中的所有元素，并通过每个元素将类添加到#timeline容器中的相应列表项：

$("#elements > div").withinviewport().each(function() {
   $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});

第4步：

全部放在一起：

$(window).bind("scroll", function() {

    //clear all active class
    $('#timeline > li').removeClass('active');

    //add active class to timeline
    $("#elements > div").withinviewport().each(function() {
         $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
    });
});

此插件还为您提供了为视口设置顶部，底部，左侧和右侧偏移的机会。

在此处查看演示：http://patik.com/code/within-viewport/