使用jquery航點與類

我有一堆與分散在我的網頁上的類.container的div。我想用jQuery來觸發一個動畫，當我滾動到一個.container，但我想動畫只在該div上。使用jquery航點與類

$('.container').waypoint(function(direction){ 
    $this = $(this); 
    $(function(){ 
     //$this here selects the last div with class .container 
    }); 
},{offset: 'bottom-in-view'});

如何只選擇我滾動的當前div？

來源

2014-07-09 Иван Божков

添加另一個班級？ '''class =「container waypoint」'''然後'''$（'。waypoint'）''' –

Christopher如果你的意思是添加.waypoint到div我想動畫 - 我需要所有div的動畫當用戶向他們滾動時，我只需要他們，以便他們可以真正看到它。如果您的意思是將.waypoint添加到scrolledTo .container，我仍然無法弄清楚如何選擇當前.container –

啊。我有點困惑。 –

編輯

對不起，我誤解你了。下面的代碼應該允許你通過滾動事件來檢測你的一個容器何時進入視圖。

'use strict'; 

$(function() { 
    var containers = $('.container'); 

    function isScrolledIntoView(elem) { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 

     return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
    } 

    window.onscroll = function (event) { 
     for (var i = 0; i < containers.length; i++) { 
      var container = containers[i]; 
      if (isScrolledIntoView(container)) { 
       // animate as needed here 
       console.log('you can see' + container.innerHTML); 
      } 
     } 
    }; 
});

的isScrolledIntoViewfunction是無恥從here解除。

來源

2014-07-09 01:04:49

我的鼠標可能在瀏覽器的標題上 - 動畫永遠不會顯示。另外我希望動畫也可以在移動設備上使用。 –

它需要一些修復才能觸發效果只有一次，但我認爲每個人都有這個想法。謝謝！ –

高興地伸出一隻手！ –

使用jquery航點與類

回答

相關問題