SPGuar SPGuar - 2 months ago 8
CSS Question

how to auto detect the scrollTop position of a particular Div?

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

if($(window).scrollTop() > 700)


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

is there a way to detect if a particular div is in view?

here is my HTML , CSS and JS.

HTML

<body>
<div class="container clearFix container1">
<div class="text1">

</div>
<div class="text2">

</div>
</div>
<div class="container clearFix">
<div class="text1">

</div>
<div class="text2">

</div>
</div>
<div class="container clearFix">
<div class="text1">

</div>
<div class="text2">

</div>
</div>




CSS

.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 > 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;
}


JS

$(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() > 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() > 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");
}
});
});

Answer

To find the position of a div compared to the page, you would use .offset().

var divTop = $('div').offset().top;

This will give you a variable for the top of the selected container. You just put that in where you have:

if($(window).scrollTop() > divTop)