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'）這將找到所有類與accueil文本文件

但我覺得你可能正在尋找這個。

首先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選擇讓所有的元素在你視窗和每個元素在你的#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/