jQuery监听页面的滚动状态,实现代码:

$(document).scroll(function() {
       var scroH = $(document).scrollTop(); //滚动高度
       var viewH = $(window).height(); //可见高度
       var contentH = $(document).height(); //内容高度

if(scroH >100){ //距离顶部大于100px时

}
      if (contentH - (scroH + viewH) <= 100){ //距离底部高度小于100px

}  
    if (contentH = (scroH + viewH)){ //滚动条滑到底部啦

}

});

jq监听页面的滚动事件,的更多相关文章

  1. vue监听页面中的某个div的滚动事件,并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...

  2. js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

    /** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...

  3. react 监听页面滚动

    html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...

  4. uni-app中不使用scroll-view组件,监听页面滑直底部事件

    最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view ...

  5. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  6. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  7. vue 中监听页面滚动

    监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...

  8. JS控制全屏,监听退出全屏事件

    实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen(); ...

  9. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

随机推荐

  1. c.a.o.c.p.inbound.mysql.rds.RdsBinlogEventParserProxy - prepare to find start position just show master status

    2018-12-27 08:39:49.808 [destination = example , address = /127.0.0.1:3308 , EventParser] WARN c.a.o ...

  2. 轮播图CSS

    css3中的animation:动画名 持续时间 动画的速度曲线 动画开始之前的延迟 动画播放的次数 是否应该轮流反向播放动画 动画播放次数:n(定义应该播放多少次动画) : infinite(无限循 ...

  3. MongoDB 范围查询

    查询价格在200-9000    $gt  大于      $lt    小于 //查询价格200-9000范围的数据 db.prodgory.find({"}}) 查询给定范围数据   $ ...

  4. Itellij IDEA下Maven的配置

    maven基本配置 配置阿里云镜像 打开settings.xml,添加 <mirrors> <mirror> <id>alimaven</id> < ...

  5. qt聊天室bug-- error: no matching function for call to 'Ui::Widget::setupUi(Widget*)' ui->setupUi(this); ^

  6. QT聊天室--重大bug

    发送qqqqqqqqqqqqqqqqqqqqqqq: 发送test

  7. (二)Spring框架之JDBC的基本使用(p6spy插件的使用)

    案例一: 用Spring IOC方式使用JDBC Test_2.java package jdbc; import java.lang.Thread.State; import java.sql.Co ...

  8. asp.net core 2.0发布到IIS报错解决方案

    大体来说,是环境的问题. 第一个错误,如图: 1. 查了网上说是文件夹权限的问题,依次设置了Everyone权限和IIS_IUSER权限,能勾选的都勾选了,然而并没有什么用,看来不是这个问题导致的. ...

  9. MYSQL编码转换的问题latin1转utf8

    1.先导出 mysqldump --default-character-set=latin1 --create-options=false --set-charset=false  -u root - ...

  10. 线程池工具ThreadPoolExecutor

    JDK1.5中引入了强大的concurrent包,其中最常用的莫过了线程池的实现ThreadPoolExecutor,它给我们带来了极大的方便,但同时,对于该线程池不恰当的设置也可能使其效率并不能达到 ...