想實現窗口滾動到一定位置時，部分網頁的頁面發生一些變化，但是手頭沒有合適的插件，所以就想到自己編寫一個簡易的方法，
想到這個方法要有很高的自由度和適應性，在這，就盡量的削減其功能，若有錯誤的地方或者更好的建議，請大家評論，一同探討，
好了廢話不多說，下面開始干活了！
首先，說一下我想實現的基本功能：
此方法需要有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，希望導游們能夠指出，我們共同探討。個人感覺還是蠻實用的，比直接應
用插件靈活性高，代碼量也少很多。