how to auto detect the scrollTop position of a particular Div?
<p>I was trying to implement the scroll based animation. I mean i want to animate the content of a particular div when it comes in the view. To achieve this i have given the hard coded value to like</p>

<pre><code> if($(window).scrollTop() &gt; 700)
</code></pre>

<p>if there are so many section on a page then for all of them i will have to give the hard coded values. </p>

<p>is there a way to detect if a particular div is in view?</p>

<p>here is my HTML , CSS and JS.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;body&gt;
&lt;div class="container clearFix container1"&gt;
    &lt;div class="text1"&gt;

    &lt;/div&gt;  
    &lt;div class="text2"&gt;

    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="container clearFix"&gt;
    &lt;div class="text1"&gt;

    &lt;/div&gt;  
    &lt;div class="text2"&gt;

    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="container clearFix"&gt;
    &lt;div class="text1"&gt;

    &lt;/div&gt;  
    &lt;div class="text2"&gt;

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p><strong>CSS</strong></p>

<pre><code>.container{
    width: 100%;
    height: 550px;
    background: #ddd;
    padding: 30px;
    border-bottom: 1px solid black;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    perspective: 1000px;

}
.clearFix{
    clear: both;
}
.container &gt; div{
    display: block;
    width: 22%;
    height: 300px;
    border:1px solid black;
    background-color: #ccc; 
    padding: 10px;  
    text-align: justify;
    position: absolute;
    transition: all 1s ease-in-out;
    transform-style: preserve-3d;
}
.text1{
    left: 30px;
    opacity: 0;
}
.text2{ 
    right: 30px;
    opacity: 0;
}
.container:nth-child(3) .text1{

    transform: rotateY(90deg);
    left: 200px;
}
.container:nth-child(3) .text2{

    transform: rotateY(-90deg);
    right: 200px;   
}
.section2T1{
    transform: translate(200px) rotate(360deg) ;
    opacity: 1;
}
.section2T2{
    transform: translate(-200px) rotate(360deg) ;
    opacity: 1;
}
.section3T1{
    transform: rotateY(0deg) !important;
    opacity: 1;
}
.section3T2{
    transform: rotateY(0deg) !important;
    opacity: 1; 
}
</code></pre>

<p><strong>JS</strong></p>

<pre><code>$(document).ready(function(){
$(".container:nth-child(1) .text1").delay(500).animate( {
            left:200,
            opacity: 1
        },500);

    $(".container:nth-child(1) .text2").delay(500).animate( {
        right:200,
        opacity: 1
    },500);

    $(document).on("scroll",function(){ 


        if($(window).scrollTop() &gt; 150){

            $(".container:nth-child(2) .text1").delay(500).addClass("section2T1");

            $(".container:nth-child(2) .text2").delay(500).addClass("section2T2");
        }
        else{
            $(".container:nth-child(2) .text1").delay(500).removeClass("section2T1");

            $(".container:nth-child(2) .text2").delay(500).removeClass("section2T2");

        }


        if($(window).scrollTop() &gt; 700){

            $(".container:nth-child(3) .text1").delay(500).addClass("section3T1");

            $(".container:nth-child(3) .text2").delay(500).addClass("section3T2");
        }
        else{
            $(".container:nth-child(3) .text1").delay(500).removeClass("section3T1");

            $(".container:nth-child(3)        .text2").delay(500).removeClass("section3T2");
        }
   }); 
});
</code></pre>