Jquery判断滚动条是否到达窗口顶部和底部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
$(document).ready(function(){
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
```
<!--more-->
```javascript
var win_height=$(window).height();
var doc_height=$(document).height();
var scroll_top=$(document).scrollTop();
/*
doc_height是文档的高度,scroll_top是滚动条上部离文档顶部的高度,window_height表示窗口高度。
当scroll_top == 0 时,表示滚动条已经到达窗口顶部。
当scroll_top + window_height >= doc_height 时,表示滚动条已经到达窗口底部。
*/
//判断滚动条是否到达窗口底部
$(window).bind('scroll', function(){ //绑定滚动事件
if($(document).scrollTop() + $(window).height() >= $(document).height()){
console.log(win_height);
console.log($(document).scrollTop());
console.log(doc_height);
//......
}
});
});
</script>