爲什麼（jQuery）Waypoint「bottom-in-view」對隱藏的元素無效？

Question

我正在嘗試使用jQuery & Waypoints（formely jQuery Waypoint）在用戶滾動時動態顯示隱藏圖像。

我發現我可以很輕鬆地添加一個航點的元素，並有該元素爲「鑑於」（與膠印屬性設置在底部的視圖）的處理程序觸發。

但是，試圖使用相同的屬性在隱藏的元素上不起作用：處理程序在加載頁面後立即觸發。

例如：當他們進入視口時隱藏已經顯示的元素很容易。 （Example 1: jsFiddle）：

var waypoints = $('.dynamic').waypoint({ 
    handler: function (direction) { 
     $(this).hide(700); 
    }, 
    offset: 'bottom-in-view' 
}); 

但是，我想要做的是相反的：顯示隱藏的元素，當我們滾動到其位置。下一個示例不起作用，因爲處理程序在window.load（）事件之後立即觸發，而不是等待用戶向下滾動。 （Example 2: jsFiddle）：

var waypoints = $('.dynamic').waypoint({ // these elements are display: none 
    handler: function (direction) { 
     $(this).show(700); 
    }, 
    offset: 'bottom-in-view' 
}); 

我找到了解決辦法。我使用了一個空的（但不是隱藏的）div，我將它附加到航點上。然後，當我向下滾動到前面的div時，航點被執行。在div的處理程序中，我使用jQuery來顯示其他元素。 （Example 3: jsFiddle）：

var waypoints = $('#emptyDiv').waypoint({ 
    handler: function (direction) { 
     $('.dynamic').show(700); 
    }, 
    offset: 'bottom-in-view' 
}); 

不過，我仍然困惑，爲什麼航點被window.load後立即解僱（）當連接到隱藏要素。儘管未顯示，但航點所附的元素仍在頁面的下方。

Answer 1

它不只是'bottom-in-view'。當元素被隱藏並顯示無時，每個偏移都會失敗。這在the Waypoints debugging guide section on display none elements詳細介紹。

航點的工作方式要求在該位置是在頁面上，這樣它可以計算出在哪裏滾動它需要觸發處理程序的元素。但顯示沒有元素不要住在頁面上。當被問到時，這些元素在0,0處報告自己。