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); });    }  });});