使用JavaScript實現頁面滑動到指定位置載入動畫。

若頁面滾動到class名為group-pic的元素的位置時開始載入

1. $(document).ready(function(){  
2.     var a,b,c;  
3.     a = $(window).height();    //瀏覽器視窗高度  
4.     var group = $(".group-pic");  
5.     $(window).scroll(function(){  
6.         b = $(this).scrollTop();   //頁面滾動的高度  
7.         c = group.offset().top;    //元素距離文件（document）頂部的高度  
8.         if(a+b>c){  
9.             ...  
10.         }else{  
11.             ...  
12.         }  
13.     });  
14. });  

    1.獲取瀏覽器視窗的高度；

    2.獲取頁面滾動的高度；

    3.獲取頁面距離文件（document）頂部的高度

offset().top具體指的是距哪裡的高度呢？

一些獲寬高度的屬性：

網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth   (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight  (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被捲去的高： document.body.scrollTop;
網頁被捲去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
螢幕解析度的高： window.screen.height;
螢幕解析度的寬： window.screen.width;
螢幕可用工作區高度： window.screen.availHeight;
螢幕可用工作區寬度：window.screen.availWidth;

obj.offsetTop 指 obj 距離上方或上層控制元件的位置，整型，單位畫素。
obj.offsetLeft 指 obj 距離左方或上層控制元件的位置，整型，單位畫素。
obj.offsetWidth 指 obj 控制元件自身的寬度，整型，單位畫素。
obj.offsetHeight 指 obj 控制元件自身的高度，整型，單位畫素。

1.offsetTop : 當前物件到其上級層頂部的距離.
不能對其進行賦值.設定物件到頁面頂部的距離請用style.top屬性.

2.offsetLeft : 當前物件到其上級層左邊的距離.
不能對其進行賦值.設定物件到頁面左部的距離請用style.left屬性.

3.offsetWidth : 當前物件的寬度.
與style.width屬性的區別在於:如物件的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中物件的寬度值而不是百分比值

4.offsetHeight : 與style.height屬性的區別在於:如物件的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中物件的高度值而不是百分比值