javascript - addClass 被添加到所有 DIV 中，无论其位置如何(视口(viewport))

Question

我已经为我的问题寻找了解决方案，但没有找到任何答案。

问题在于，我对许多 DIV 使用 animate.css，但我希望当元素(具有类“animated”和“animation in animate.css”)位于视口(viewport)中时动画生效。我的问题是类“animated”和“animation in 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

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

首先，屏幕上的可见区域称为视口(viewport)。

(image is taken from OP. Cleared and edited in Photoshop)

<小时/>

因此，您所需要做的就是检测视口(viewport)中的所有元素。

这可以使用许多 jQuery 插件来实现，但我将通过一个示例向您解释，该示例称为 jQuery insideviewport

链接到来源和文档:[ 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');
    });
});

.

<小时/>

.

此插件还使您有机会设置视口(viewport)的顶部、底部、左侧和右侧偏移。

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