jQuery 8 关于Jquery 的scroll事件（转载）

jQuery 8 关于Jquery
的scroll事件（转载）

 

写法：

$(window).scroll(function () {})（推荐）或 $(document).scroll(function () {})

今天做一个随屏幕滚动的导航条时，发现一个问题： 火狐、谷歌、ie9正常，ie8、7、6页面滚动时，导航条没有反应。 代码如下： 　　$(document).bind("scroll",function(){ //…… }); 后来怀疑绑定对象出了问题，不应该绑定document。改成“body”，还是不行。再改成window，测试成功。 代码如下： 　　$(window).bind("scroll",function(){ //…… }); 查找api后，发现一句话： 　　当用户滚动元素中到一个不同的地方时，scroll事件将发送到这个元素。它适用于window对象，但也可滚动框架与CSS overflow属性设置为scroll的元素

 

 

使用：

jQuery 的scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可以参考

1 scrollTop()和scrollLeft()
$(window).scrollTop() 获取垂直滚动的距离，即当前滚动的地方的窗口顶端到整个页面顶端的距离

$(window).scrollLeft() 这是获取水平滚动条的距离
1要获取顶端
只需要获取到scrollTop()==0的时候 就是顶端了
2要获取底端
只要获取scrollTop()>=$(document).height()-$(window).height()

就可以知道已经滚动到底端了

 

2 (window).height()和(document).height()的区别
jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度。当浏览器窗口大小改变时(如最大化或拉大窗口后)
jQuery(window).height()
随之改变，但是jQuery(document).height()是不变的。

范例如下:
$(document).ready(function () {
$(window).scroll(function () {
//$(window).scrollTop()这个方法是当前滚动条滚动的距离
//$(window).height()获取当前窗体的高度
//$(document).height()获取当前文档的高度
var bot = 50;
//bot是底部距离的高度
if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
//当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时；
//我们需要去异步加载数据了
$.getJSON("url", { page: "2" }, function (str) { alert(str); });
}
});
});