用JavaScript實現(xiàn)頁面滑動到指定位置加載動畫。

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

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

原理： 1.獲取瀏覽器窗口的高度；

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

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

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

一些獲寬高度的屬性：

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;

網(wǎng)頁可見區(qū)域高： document.body.clientHeight;

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);

網(wǎng)頁正文全文寬： document.body.scrollWidth;

網(wǎng)頁正文全文高： document.body.scrollHeight;

網(wǎng)頁被卷去的高： document.body.scrollTop;

網(wǎng)頁被卷去的左： document.body.scrollLeft;

網(wǎng)頁正文部分上： window.screenTop;

網(wǎng)頁正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的寬： window.screen.width;

屏幕可用工作區(qū)高度： window.screen.availHeight;

屏幕可用工作區(qū)寬度：window.screen.availWidth;

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

1.offsetTop : 當(dāng)前對象到其上級層頂部的距離.

不能對其進(jìn)行賦值.設(shè)置對象到頁面頂部的距離請用style.top屬性.

2.offsetLeft : 當(dāng)前對象到其上級層左邊的距離.

不能對其進(jìn)行賦值.設(shè)置對象到頁面左部的距離請用style.left屬性.

3.offsetWidth : 當(dāng)前對象的寬度.

與style.width屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.offsetHeight : 與style.height屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值