scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离

$(window).scroll(function(){
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if(scrollHeight-scrollTop-windowHeight <=300){
//当滚动条滚动到距离底部还有300px的时候加载类容
  }else{
//当滚动条滚动到距离底部大于300px的时候加载类容
}
});

JS实现滚动条滚到页面距离底部300px时执行事件的方法的更多相关文章

  1. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  2. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  3. ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行

    初次使用ListView,在写列表滚动到最底部自动加载使用到方法onEndReached, 发现: ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行, 于是翻看文 ...

  4. js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  5. JS实现判断滚动条滚到页面底部并执行事件的方法

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  6. jquery如何判断滚动条滚到页面底部并执行事件

    首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  7. selenium + python 怎样才能滚到页面的底部?

    可以用 execute_script方法来处理这个. 调用原生javascript的API,这样你想滚到哪里就能滚到哪里. 下面的代码演示了如何滚到页面的最下面:   driver.execute_s ...

  8. jQuery判断滚动条滚到页面底部脚本

    原文地址 http://www.111cn.net/wy/jquery/61741.htm

  9. js 判断滚动条是不是在浏览器底部

    http://jingyan.baidu.com/album/86f4a73e91da7837d65269d5.html?picindex=2

随机推荐

  1. ESP8266 TCP传输AT指令顺序

    ); //复位 ret = ESP8266_Cmd ( );//测试AT启动 ret = ESP8266_Cmd ( );//选择WIFI应用模式softAP+station //ret = ESP8 ...

  2. UIView的autoresizingMask属性

    今天做相册列表的时候,发现有些 UITableViewController 属性不好记忆,然后就查找了一些资料.做一下备份. 在 UIView 中有一个autoresizingMask的属性,它对应的 ...

  3. How Tomcat Works(六)

    本文继续分析HttpProcessor类,该类实现了org.apache.catalina.Lifecycle接口和java.lang.Runnable接口 我们先分析它的构造函数 /** * The ...

  4. java去掉jsp标签内容的方法

    //去掉内容的标签   public static String removeTag(String count){    try {    int tagCheck=-1;    do {     i ...

  5. Slave延迟很大的优化方法总结(MySQL优化)

    [http://www.cstor.cn/textdetail_9146.html] 一般而言,slave相对master延迟较大,其根本原因就是slave上的复制线程没办法真正做到并发.简单说,在m ...

  6. 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息]

    三.使用Azure AD管理用户信息 在上一章我们采用OpenID的方案和Azure AD交互进行身份验证,本章节我们继续了解如何在Azure AD中创建用户,列出用户信息,修改用户信息和删除用户信息 ...

  7. 5分钟内使用React、Webpack与ES6构建应用

    http://blog.leapoahead.com/2015/09/12/react-es6-webpack-in-5-minutes/

  8. EasyMock使用说明

    来自官网的使用说明,原文见http://www.easymock.org/EasyMock2_0_Documentation.html 1.1. 准备 大多数的软件系统都不是单独运行的,它们都需要于其 ...

  9. thinkphp 3+ 观后详解 (1)

    最近面试了一些公司,发现自己的对于架构能力的不足,于是决定开始从最基本的代码做起.先看看大牛们怎么架构整个框架的.鉴于国外的框架比较难懂,于是就选择了国内比较流行的thinkphp来进行研究. 下面写 ...

  10. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...