如何獲得一個css過渡，直到滾動到一個特定的div才啓動

Question

我遇到了一些問題，試圖讓我的CSS過渡/序列開始，一旦我滾動其父div。我已經完成了JavaScript功能，只是從來沒有一個CSS過渡。

現在我的圖片甚至不會顯示，更不用說從序列開始了。如果我註釋掉javascript，那麼序列將正常播放。

當我進入父div section1時，我該如何獲得css轉換？

我把這個在評論中的jsfiddle，因爲它更容易看到這一點。

/*$("#think").hide(); 
 

 
//init scrolling event heandler 
 
$(document).scroll(function() { 
 

 
    var docScroll = $(document).scrollTop(), 
 
    boxCntOfset = $("#section1").offset().top - 100; 
 

 

 
    //when rich top of boxex than fire 
 
    if (docScroll >= boxCntOfset) { 
 

 
    $("#think").fadeIn(200) 
 

 
    } else { 
 
    $("#think").fadeOut(200) 
 

 
    } 
 
})*/ 
 

 

 
//Scroll for think images 
 
/*$("#think").hide(); 
 
$(function() { 
 
    var oTop = $('##section1').offset().top - window.innerHeight; 
 
    $(window).scroll(function() { 
 

 
    var pTop = $('body').scrollTop(); 
 
    console.log(pTop + ' - ' + oTop); 
 
    if (pTop > oTop) { 
 
     $("#think").fadeIn(200) 
 
    } 
 
    }); 
 
});*/

#red { 
 
    width: 100%; 
 
    height: 700px; 
 
    background:red; 
 
} 
 
#section1 { 
 
    width: 100%; 
 
    height: 600px; 
 
    background:blue; 
 
} 
 
#think { 
 
/*opacity: 0;*/ 
 
\t margin-left: 200px; 
 
\t width: auto; 
 
\t height: 500px; 
 
\t -webkit-animation-name: think; 
 
\t   animation-name: think; 
 
\t -webkit-animation-duration: 8s; 
 
\t   animation-duration: 8s; 
 
    -webkit-animation-direction: normal; 
 
      animation-direction: normal; 
 
\t -webkit-animation-fill-mode: forwards; 
 
\t   animation-fill-mode: forwards; 
 
\t /*min-height: 500px; min-width: 500px;*/ 
 
\t background-repeat: no-repeat; 
 
\t /*background-size: 100% auto;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="red"></div> 
 
<div class="section" id="section1"> 
 
    <div id="section1-right-container"> 
 
    <div id="think"></div> 
 
    </div> 
 
</div>

Answer 1

可以使用jquery.visible插件可以輕鬆地確定元素中視：http://www.jsdelivr.com/projects/jquery.visible

接下來，您將需要確定是否是在一個窗口中滾動功能可見光和添加一個包含動畫的css類：

$(window).on("scroll", function(){ 
    // Determine if the element is in the viewport 
    if($('.body-main').visible(true)) { 
     $('.body-main').addClass("think"); 
    } 
}); 

JSfiddle考試PLE：https://jsfiddle.net/Zachary1748/tqh00p9n/

Answer 2

這是一個小而易於使用的JS庫，它可以有助於您：jeremenichelli.github.io/hunt