jQuery的檢測屏幕的滾動，並添加靜態HTML

Question

我有一些代碼，當您滾動，然後調用一個函數檢測。

在這個函數中我希望能夠在內容上消失，因爲你滾動。所以，當我到達頁面的底部時，它會調用一個函數，然後靜態html代碼片段就會淡入，比如說10行內容。

希望有人能幫助我完成這一關作爲即時通訊卡： -

http://jsfiddle.net/sTSxS/

感謝

Answer 1

好了，首先你可能會想有某種比例來確定你想要淡入的行數。爲什麼你需要這個比例？如果用戶只能向下滾動一英寸，則不希望在6英寸內容中淡入淡出。

我想記下這裏指出的是，你的最終實現，這個比例是不是你想要使用什麼。儘管這是解決問題的簡單方法，但實際上，您將希望淡入一些與您的頁面位置和內容大小相關的內容。此外，即使整個行對訪問者不可見（即使需要，我也可以幫助您完成此操作），您將希望內容淡入。

爲了我們的目的，我們假設每行的高度爲20px，行之間沒有空格，並且我們的比率爲每滾動20px就會有1行淡入淡出（請注意，使用此比例，您的內容不會淡入，直到完全滾動到視圖中）。

下一步是設計一個方法來跟蹤多少你被滾動。

var current = $(window).scrollTop(); //sets the initial value 

接下來，您將要創建保留多少行的軌道的方法：保持簡單，我們只需要使用一個變量來保存當前窗口位置（這個變量將滾動每20像素後更新）你已經消失了。有這樣做（有些比一個我將用更好）的方法很多，但我要使用一個變量爲簡單起見。

var rowsShown = 0; 

接下來你需要編寫你的滾動事件處理程序調用你的代碼，以確定是否應該，如果是這樣，淡入您行：

$(window).scroll(function() { 
    ...code to determine if you should and actually fade in rows... 
}); 

現在，你需要寫你的條件以確定您是否應該淡入任何行。首先編寫另一個變量來確定新的窗口位置，並將其與前一個位置進行比較，如current中所存儲的那樣。請記住，我們的比例是每行20像素，所以窗口必須至少20像素已滾動另一行褪色：

var newPosition = $(window).scrollTop(); 

if ((newPosition - current) >= 20) { 
    ...fade in rows... 
    current += 20; //update current 
} 

我想指出的是，我們在這個簡單的「教程」的目的您需要將電流設置爲比以前增加20倍，而不是將其更新爲新的當前位置（newPosition）。你爲什麼問？因爲小鼠並不總是一次滾動一個像素（事實上，他們幾乎沒有做），這樣，因爲我們保持它的簡單，每行20像素褪色的，我們要保持通過保持當前20的倍數比例。當需要編寫最終版本時，您可能會想將其更改爲current = newPosition;。

接下來，你將不得不寫你的淡入代碼：

$(rowsToFadeIn).eq(rowsShown).fadeIn(speed, function() { 
    rowsShown += 1; //increment the accumulator 
    ...do any other call back stuff here... 
}); 

最後，你會想要寫滾動起來，淡出你的內容（否則，如果您滾動，並開始了類似的方法再次滾動，你不會看到你的內容消失 - 它會在你之前消失）。

請注意，這不是完整的實現 - 這只是爲了讓你開始。並且爲你測試和玩弄一些東西。一旦你有它的工作，我會修改腳本的效果部分使用.promise().done()爲了確定以前的效果何時完成。如果您使用.promise().done()是不舒服的話，我會做到以下幾點：

1. 創建一個變量var fading = 0保存當前正在衰落的元素的數量。
每次即將開始衰落的一個元素，你會做以下

2. ：

   1. 添加一個fading

   2. 通過一個類似的電話打電話給你的影響：

      $(rowsToFade).eq(rowsShown).delay((fading - 1) * speed).fadeIn(.....

      • 延遲(fading - 1) * speed等待所有當前正在運行的淡入淡出（不包括）克一個你要運行）
   3. 在你.fadeIn()方法的回調，從爲了防止不必要的延誤褪色（fading -= 1;）減去一個。

我會盡力避免定時器，如果我是你。他們有相當多的開銷，他們從來沒有做到你想要的。另外，使用淡入淡出效果往往會產生波濤洶涌的效果，特別是在慢速瀏覽器中，偶爾會出現在Chrome等更快的瀏覽器中。

讓我知道你是否對此有任何疑問。我很樂意提供幫助。祝你好運！ :)

編輯：我幾乎忘了，你將不得不設置身體或包裝元素的高度是什麼高度將是如果你的元素是正常流程的一部分，因爲display: none（這是必需的fadeIn和fadeOut）會將它們從流中移除，並將您的頁面縮短到沒有它們的高度。這可能會導致你甚至沒有滾動條。編輯2：請注意，如果您使用.delay()，您可以（也應該在使用它時）改進建議的更新實施，因爲您無疑會遇到不必要的延遲。如果你不喜歡計劃A（.promise().done()），則基本上是計劃B;）

但是，如果您是jQuery的新手，您可能會從改進B方面學到更多的東西，而不是使用A方法。

Answer 2

if ($(window).scrollTop() + $(window).height() > ($(document).height()/1.2) && document.documentElement.scrollHeight != document.documentElement.clientHeight) { 
       doit(); 

}