如何自动检测特定 Div 的 scrollTop 位置? [复制]
Posted
技术标签:
【中文标题】如何自动检测特定 Div 的 scrollTop 位置? [复制]【英文标题】:how to auto detect the scrollTop position of a particular Div? [duplicate] 【发布时间】:2017-02-06 14:14:29 【问题描述】:我试图实现基于滚动的动画。我的意思是我想在视图中为特定 div 的内容设置动画。为了实现这一点,我已经给出了硬编码的值来喜欢
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");
);
);
【问题讨论】:
要评估元素是否在视图中,您需要在元素的窗口偏移高度和滚动顶部值之间进行一些数学运算...检查***.com/questions/39642726/… 【参考方案1】:要查找 div 相对于页面的位置,您可以使用 .offset()
。
var divTop = $('div').offset().top;
这将为您提供所选容器顶部的变量。你只要把它放在你有的地方:
if($(window).scrollTop() > divTop)
【讨论】:
【参考方案2】:你可以使用偏移方法:
$("#myDiv").offset().top
【讨论】:
【参考方案3】:您可以使用 jQuery 找到元素的位置:
$("YOURSELECTOR").position().top;
【讨论】:
以上是关于如何自动检测特定 Div 的 scrollTop 位置? [复制]的主要内容,如果未能解决你的问题,请参考以下文章