Javascript 如何自动检测特定Div的滚动顶部位置？_Javascript_Jquery_Html_Css

Javascript 如何自动检测特定Div的滚动顶部位置？

javascript jquery html css

Javascript 如何自动检测特定Div的滚动顶部位置？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图实现基于滚动的动画。我的意思是，当某个特定div出现在视图中时，我想对其内容设置动画。为了实现这一点，我给了like硬编码的值 if($(window).scrollTop() > 700) 如果一页上有这么多的部分，那么对于所有部分，我必须给出硬编码的值是否有一种方法可以检测特定的div是否在视图中这是我的HTML、CSS和JS HTML <body> <div class="container clearFix container1"> &

我试图实现基于滚动的动画。我的意思是，当某个特定div出现在视图中时，我想对其内容设置动画。为了实现这一点，我给了like硬编码的值

 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>

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

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

您可以使用jQuery查找元素的位置：

$("YOURSELECTOR").position().top;

您可以使用jQuery查找元素的位置：

$("YOURSELECTOR").position().top;

要查找div相对于页面的位置，可以使用

.offset（）

这将为您提供所选容器顶部的变量。你只要把它放在你有：

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

要查找div相对于页面的位置，可以使用

.offset（）

这将为您提供所选容器顶部的变量。你只要把它放在你有：

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

可以使用偏移方法：

$("#myDiv").offset().top

可以使用偏移方法：

$("#myDiv").offset().top

要评估某个元素是否在视图中，您需要在元素的窗口偏移高度和scrolltop值之间进行一些数学计算。。。选中此项以评估视图中是否有元素，您需要在元素的窗口偏移高度和scrolltop值之间进行一些数学计算。。。检查这个