2015-07-03 108 views
0

我一直試圖在滾動上觸發Animate.css動畫。我使用以下jquery代碼在我的頁面上進行管理。它工作正常:在div高度觸發CSS動畫

$(function() { 

    var $window   = $(window), 
     win_height_padded = $window.height() * 1.1, 
     isTouch   = Modernizr.touch; 

    if (isTouch) { $('.revealOnScroll').addClass('animated'); } 

    $window.on('scroll', revealOnScroll); 

    function revealOnScroll() { 
    var scrolled = $window.scrollTop(), 
     win_height_padded = $window.height() * 1.1; 

    // Showed... 
    $(".revealOnScroll:not(.animated)").each(function() { 
     var $this  = $(this), 
      offsetTop = $this.offset().top; 

     if (scrolled + win_height_padded > offsetTop+300) { 
     if ($this.data('timeout')) { 
      window.setTimeout(function(){ 
      $this.addClass('animated ' + $this.data('animation')); 
      }, parseInt($this.data('timeout'),10)); 
     } else { 
      $this.addClass('animated ' + $this.data('animation')); 
     } 
     } 
    }); 
    // Hidden... 
    $(".revealOnScroll.animated").each(function (index) { 
     var $this  = $(this), 
      offsetTop = $this.offset().top; 
     if (scrolled + win_height_padded < offsetTop) { 
     $(this).removeClass('animated hinge fadeInLeft fadeIn pulse') 
     } 
    }); 
    } 

    revealOnScroll(); 
}); 

但是,我有一個圖像打開全屏div。我想在我的div內滾動時使用相同的效果。

我試圖改變「窗口」與我的div的名稱,但它不工作。

回答

0

也許您的選擇器dos't存在請參閱this

+0

它確實存在。我確信這一點。但它仍然鏈接到第二頁(div後面的那個) – Pierrealexisb

+0

是爲你的div設置高度和寬度,並溢出滾動? –

+0

是的一切都按照你所說的設置。但我有一個隱藏溢出內的滾動(以防止主頁溢出)。我不知道這是否是問題。 – Pierrealexisb