如何自動檢測特定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位置？

回答

相關問題