<分区>
标签 javascript jquery html css
<分区>
我试图实现基于滚动的动画。我的意思是我想在 View 中显示特定 div 的内容时对其进行动画处理。为了实现这一点，我给了硬编码值 like
if($(window).scrollTop() > 700)
如果页面上有这么多部分，那么对于所有这些部分，我都必须给出硬编码值。
有没有办法检测特定的 div 是否在 View 中？
这是我的 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");
}
});
});
最佳答案
可以使用偏移方法:
$("#myDiv").offset().top
关于javascript - 如何自动检测特定 Div 的 scrollTop 位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39750208/