如何自动检测特定Div的scrollTop位置

我试图实现基于滚动的动画。我的意思是，当某个div出现在视图中时，我想让它的内容变成动画。为了实现这一点，我已经给出了硬编码值，如

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

如果一个页面上有这么多的部分，那么对于所有这些部分，我将不得不给出硬编码值。

是否有一种方法来检测一个特定的div是否在视图中?

这是我的HTML, CSS和JS。

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

可以使用offset方法:

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

要查找div相对于页面的位置，您可以使用.offset() .

var divTop = $('div').offset().top;
这将为所选容器的顶部提供一个变量。你只要把它放在你有:
的地方
if($(window).scrollTop() > divTop)

你可以使用jQuery找到一个元素的位置:

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

相关内容

最新更新

热门标签：