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

-1

我试图实现基于滚动的动画。我的意思是我想在视图中设置特定div的内容。为了实现这一点，我已经给出了硬编码值喜欢如何自动检测特定Div的scrollTop位置？

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

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

来源

2016-09-28 SPGuar

为了评估一个元素是你需要窗口的高度之间的一个小的数学元素偏移的观点和scrolltop值...检查这个http://stackoverflow.com/questions/39642726/animate-left-not-working-on-page-scroll/39643143#39643143 – DaniP

要找到比该页面的div的位置，你会使用.offset()。

var divTop = $('div').offset().top;

这会给你一个选定容器顶部的变量。你只要把在这里您有：

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

来源

2016-09-28 14:21:30 ntgCleaner

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

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

来源

2016-09-28 14:21:13 Arg0n

可以使用偏移方法：

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

来源

2016-09-28 14:23:20 Benjamin

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

回答

相关问题