想實作視窗滾動到一定位置時，部分網頁的頁面發生一些變化，但是手頭沒有合适的插件，是以就想到自己編寫一個簡易的方法，
想到這個方法要有很高的自由度和适應性，在這，就盡量的削減其功能，若有錯誤的地方或者更好的建議，請大家評論，一同探讨，
好了廢話不多說，下面開始幹活了！
首先，說一下我想實作的基本功能：
此方法需要有2個基本形參，，一個是我要監測的标簽a，另一個是我要監測标簽相對于哪個标簽b做的距離檢測。
當a和b的距離達到一定範圍的時候，讓網頁局部發生一些變化效果，這是我們的預期。
以下是我的方法的架構：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; margin-top: 20px; } #a1{ background-color: red; } #a2{ background-color: blue; } #a2 .a22{ width: 50px; height: 50px; background-color: navajowhite; position: relative; top: 50px; left: -50px; } #a3{ background-color: yellow; } </style> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <div id="a1"></div> <div id="a2"> <div class="a22">haha</div> </div> <div id="a3"></div> <div id="a3"></div> </body> <script language="JavaScript" src="js/jquery-1.10.2.min.js"></script> <script language="JavaScript" src="js/bootstrap.min.js"></script> <script type="text/javascript"> /*以下是我們以監測目标元素距離body頂部距離的方法*/ function myScrollFn($myElement1,$myElement2){ $(window).scroll(function(){ //這是scroll方法，視窗滾動時就會被調用 var a=$myElement1.scrollTop(); //這是監測滾動條距離頂端的距離 var b=$myElement2.offset().top; //這是監測我們目标元素距離body或者其第一個定位父元素頂端的距離 /*當div #a2距離視窗頂部距離在0px到200像素時，div .a22出現*/ if (b-a<=0&&b-a>=-200) { $(".a22").css({"left":"20px","transition":"all 1s"}); }else{ $(".a22").css({"left":"-50px","transition":"all 0s"}); } console.log(b-a); //為便于觀察，在控制台列印出距離來 }); } myScrollFn($("body"),$("#a2")); </script> </html> 上述代碼功能：當視窗上沿在達藍色div内部時，小div從左側出現，不在時恢複原狀。
這裡先普及一下基礎知識，
.scrollTop(); 是監測滾動條距離頂端的距離的，這是JQuery方法
.offset().top 是監測我們目标元素距離body或者其第一個定位父元素頂端的距離這也是JQuery方法及屬性 同樣在HTML5中、js中也都有這些屬性方法的定義和詳解，有興趣的可以去檢視幫助文檔。
那按照以上結構就可以比較輕松的實作檢測距離實作一定動畫效果，隻需要在if判斷書寫你想要變化的代碼即可，如果想實作
每次到達設定區間都執行動畫，可以像例子中一般，在else中設定重置我們的修改的樣式即可。
寫到這的時候，突然想到，我們網頁中常用的那些，網頁滾動産生的視覺差效果，他是不是也可以用這個來做一個方法呢！
下面請看這個簡易的demo：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container{ position: relative; height: 3000px; padding-top: 400px; background-color: gainsboro; } .a1{ width: 300px; height: 300px; background-image: url(img/FqYgq95pkXU2iGax9iYPaxRnt1Xl.png); background-size: 100%; position: absolute; } .a2{ width: 200px; height: 100px; background-color: yellow; position: absolute; margin-left: 50px; } </style> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <div class="container"> <div class="a1"></div> <div class="a2"></div> </div> </body> <script language="JavaScript" src="js/jquery-1.10.2.min.js"></script> <script language="JavaScript" src="js/bootstrap.min.js"></script> <script type="text/javascript"> /*編寫一個簡單的方法,實作網頁常見常見的視覺差效果*/ function myEye($myElement1,$myElement2){ var num=1; $(window).scroll(function(){ var a=$("body").scrollTop(); //取出滾動條離視窗頂端的距離 var yellow=$myElement2.offset().top; //取出黃色div塊離body最上方的距離 var c=yellow-a+0.5; //計算出比滾動條滾動速度慢一倍的數值 $myElement1.css({"top":+c+"px"}); //設定黃色div的慢一倍的移動速度，産生視覺差效果 }) } myEye($(".a1"),$(".a2")); </script> </html> 兩個參數，可以設定成需要産生視覺差的2個元素節點，當然這裡做的是demo，多加一些形參也都是可以的，看具體的網頁需求了。
注意這裡做實參的元素節點都是通過絕對定位實作的。通過 c=yellow-a+0.5;$myElement1.css({"top":+c+"px"}); 這兩句代碼
可以實作2個塊滾動速度差一倍，如果要改變相差的速度，隻需要修改 c=yellow-a+0.5;這個式子就可以了，這個浏覽器滾動條的精度，
我們暫且以1px來算（這個不同裝置好像是不同的，部落客不是很了解），但是以1像素來計算，通過加減0-1之間的數值，可以實作任意
速度比的視覺差，按照這個結構，修改起來還是很容易的。
以上内容純屬部落客無聊，一個人亂搞的産物，如果有bug，希望導遊們能夠指出，我們共同探讨。個人感覺還是蠻實用的，比直接應
用插件靈活性高，代碼量也少很多。
![struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)