我试图实现基于滚动的动画。我的意思是我想在视图中设置特定div的内容。为了实现这一点,我已经给出了硬编码值喜欢如何自动检测特定Div的scrollTop位置?
if($(window).scrollTop() > 700)
,如果有这么多的部分页面上,然后对所有的人,我将不得不放弃硬编码值。
有没有办法检测一个特定的div是否在视图中?
这里是我的HTML,CSS和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");
}
});
});
为了评估一个元素是你需要窗口的高度之间的一个小的数学元素偏移的观点和scrolltop值...检查这个http://stackoverflow.com/questions/39642726/animate-left-not-working-on-page-scroll/39643143#39643143 – DaniP