嘗試在向下滾動時重新創建元素中的幻燈片

Question

我正在尋找一些關於如何重新創建此功能的指導。它的功能是當你滑過某個點時，在右側滑動。你可以在這裏看到它的動作。 http://mashable.com/2011/08/19/hp-touchpad-lower-prices-canada/#comment-17611181

任何人都可以幫我理解這是怎麼回事？源代碼告訴我什麼..

Answer 1

有可能是一個jQuery插件，做你需要什麼了，但因爲我不一個，這裏的基本步驟：

1. 設置滾動事件監聽器窗口：$(window).scroll(function(){…});
2. 在這種事件偵聽器功能，檢查window.scrollY屬性是頁面被多少像素向下滾動
3. 如果該值分別高於/某一閾值，顯示/隱藏滑動元件下方

您還可以使用window.scrollY + window.innerHeight查找瀏覽器中可見的最低像素位置。然後，您可以將它與頁面上某個元素的位置進行比較。例如，如果您希望在用戶滾動到主內容底部時顯示滑動元素，請檢查內容元素的下邊緣（即頂部偏移+高度）是否小於scrollY + innerHeight。如果是，則用戶已滾動到或過去內容元素，並且可以滑動該元素。

滑動元素自身應使用position:fixed（這在IE6中不起作用，但是there are ways around that）並且錨定在窗口的邊界/底部。然後，滑動動畫應動畫從負元素的寬度的right位置到零，它在滑動

Here's a simple demo（沒有動畫，只是隱藏/顯示）（相反的隱藏時，它適用）