如何自动检测特定 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 位置? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

网页中如何让DIV在网页滚动到特定位置时出现

如何滚动到特定的div? [复制]

如何滚动到特定的div? [复制]

如何通过JQuery将DIV的滚动条滚动到指定的位置

如何向 scrollTop() 函数添加填充

让DIV的滚动条自动滚动到最底部 - 3种方法