無法讓jQuery Waypoints與JavaScript創建的內容一起玩好

所以，我一直在爲我目前正在處理的項目尋找jQuery Waypoint。我用它過去，並沒有任何問題，但對於這個特定的項目，我似乎無法得到它的工作。這次的不同之處在於所有的競爭對手都是用JavaScript注入的，儘管這不應該成爲一個問題，因爲您使用$.waypoints('refresh');來簡單地更新航點位置。無法讓jQuery Waypoints與JavaScript創建的內容一起玩好

由於內容是即時創建的，因此我引入了一個計時器以確保在腳本初始化之前加載內容。

$(document).ready(function(){ 

    setTimeout(function(){ 

     waypoints(); 
     $.waypoints('refresh'); 

    }, 2000); 

}); 

function waypoints() { 

    alert('jQuery Waypoint has initialized'); 
    //ep.listener.waypoints() 

    $(function() { 
     var $things = $('article.curr section'); 

     $things.waypoint(function(direction) { 
      if (direction === 'down') { 
      //do stuff 
      console.log(this); 
      console.log('down'); 
      } 
     }, { offset: '50%' }); 

     $things.waypoint(function(direction) { 
      if (direction === 'up') { 
      //do stuff 
      console.log(this); 
      console.log('up');    
      } 
     }, { 
      offset: function() { 
      return $.waypoints('viewportHeight')/2 - $(this).outerHeight(); 
      } 
     }); 

    }); 

}

會發生什麼事情是，只有一次，只有一次發射航點。它會識別最上面的部分，除非您滾動到底部並刷新頁面，否則它將識別所有四個元素。

我在這裏做錯了什麼？

現場演示高達HERE
用戶名：開發
密碼：lolboy

來源

2013-08-21 INT

最初，該演示在Chrome中並沒有很好地發揮作用。現在應該糾正。 – INT

你已經做了你的身體標籤位置：固定和溢出：隱藏，這意味着滾動事件永遠不會觸發窗口上，相反，滾動事件在＃對待垃圾。 Waypoint監聽窗口上的滾動事件。

你應該改變你的CSS，讓窗口滾動而不是文章，或將航點的上下文更改爲正確的元素，即＃treats-for-trash（請參閱：http://imakewebthings.com/jquery-waypoints/#doc-options）。

來源

2013-08-26 00:43:34 RoryKoehein

謝謝！以爲我從頭到腳都經歷過這些文檔，但你證明我錯了:) – INT

無法讓jQuery Waypoints與JavaScript創建的內容一起玩好

回答

相關問題