本文總結分析了jQuery視差滾動效果網頁實現方法。分享給大家供大家參考，具體如下：
首先說兩個核心函數，當然是基於jQuery的：
1、$(document).scrollTop() ;
該函數主要是返回頁面當前頂部距離頁面頂部的像素值，是一個非負整數。
2、$(window).scroll();
該事件是監控頁面是否滾動，一旦滾動則觸發其回調函數。
由此兩個函數，我們得到下面的代碼：
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top == 100) alert(top);
});
以上代碼的意思是：當頁面滾動時，檢查當前頂部距離頁面起始之間的像素是否為100，是則彈出消息框。
當能判斷滾動的距離後，就可以進行其他的操作了。剩下的就是各種css的定位了。
在制作頁面的時候，我們要確定那些圖片是需要進行視差滾動的。對於每個圖片，我們都需要將CSS屬性定義為
position: absolute;
此刻該div會漂移到頁面的左上角，當然最好寫上 left: 0px; top: 0px;還有該div的寬度和高度，有必要的話，需要寫上overflow和background，所有的圖片都應該是png格式的，這個大家懂的。
設置好屬性後，就進行定位div的起始位置。也就是修改left和top，有必要的話可以修改right和bottom。
等以上工作完成後，就可以進行動畫設置了。
用到的函數就是css了，我是這樣設置的：
$('#text1').css('top', text1_top-parseInt(s_top)*0.15+'px');
以上代碼放在scroll()函數內，只要監測到頁面滾動就開始執行。其中 s_top 是當前的滾動距離，之前提到過。text1_top 是 $('#text1')的原始位置，且當頁面加載後，就需要讀取。一般用：
var text1_top = $('#text1').offset().top;
獲取，不能放在scroll()函數內。
現在就開始敘述視差滾動原理了：
當頁面加載完畢後，得到$('#text1')距離頁面頂部的高度，並賦值給text1_top。
當頁面滾動事件觸發後，執行 $('#text1').css('top', text1_top-parseInt(s_top)*0.15+'px') 語句，意思是：隨著頁面往下的滾動，將text1的頂部距離減去當前移動距離的0.15倍。也就是說頁面每往下移動100個像素，text1只往上移動15個像素，以此類推。這裡的減號需要注意，如果是加號，那就是往下移動15個像素。換句話說，加號是同向，減號是反向。
當頁面滾動到某個距離後才進行觸發，我的寫法是判斷：
if (s_top > 200) {
$('#text1').css('top', text1_top-parseInt(s_top - 200)*0.15+'px');
}
當滾動距離到200像素時，運行後面的語句：這裡有一個不同是s_top - 200，這裡是基數從0開始算，如果沒有減200，那麼這個基數就不是0，而是200。那麼#text1的視差滾動也不會正確的。
最後，我想說一下offset函數，他的主要目的是確定當前元素所在的left和top的數值。我們之前說過用 position: absolute; 來進行div的設置，如果div沒有設置這個，但需要滾動的話，那麼必須首先用offset函數確定某個元素的left和top後，用css函數首先賦值給需要定位的元素（一定要在設置position: absolute;之前），再設置該元素為 position: absolute; 這個也是需要在scroll()函數之外進行的。
編寫視差滾動頁面的時候，最大的體會就是要思路清晰，再次就是注意運行的順序，有時候需要用到回調函數。
需要有個相對安靜的環境去寫代碼，精神要放松，這樣效率才會更高，需要休息的時候就要休息，寫代碼時要一氣呵成。
更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。