jQuery判断页面滚动条距离顶端位置
时间:2019-11-27
本文章向大家介绍jQuery判断页面滚动条距离顶端位置,主要包括jQuery判断页面滚动条距离顶端位置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天利用空闲时间,研究了一下浏览器滚动条的简单控制,主要是通过jQuery获取滚动条的位置信息,直接上代码
1、当前窗口高度
$(window).height();
2、滚动条已滚动高度
$(window).scrollTop();
3、结合jQuery来实时获取滚动条滚动距离信息
1 $(window).on('scroll',()=>{ 2 let $fixedheader = $('#topface'); // fixed容器 3 // console.log(fixedheader); 4 var wintop=$(window).scrollTop(); // 已滚动卷去的高度 5 //console.log(wintop); 6 let winHeight = $(window).height(); // 可视窗口的高度 7 //console.log(winHeight); 8 // 卷去一个可视窗口高度后执行 9 /* if (wintop - winHeight > 0) { 10 // fixedheader.hide(); 11 $fixedheader.addClass("showtopface"); 12 } else { 13 // fixedheader.show(); 14 $fixedheader.removeClass("showtopface"); 15 } */ 16 // 当滚动条离顶部100像素时的条件判断和执行动作 17 if(wintop>100){ 18 // fixedheader.hide(); 19 $fixedheader.addClass("showtopface"); 20 } else { 21 // fixedheader.show(); 22 $fixedheader.removeClass("showtopface"); 23 } 24 25 })
通过上边代码,在做前端滚动条的控制时,或者滚动条滚动到离顶部指定位置高度时触发某些动作。我这边是当滚动到离顶部100时,给html标签增加样式showtopface,否则移除html标签样式showtopface
原文地址:https://www.cnblogs.com/926803/p/11941840.html
- activity的启动模式和栈管理
- activty栈管理
- achartengine之折线图
- What is aspnet.config
- qq侧滑
- Novell 发布Mono 1.2 推动.NET跨平台
- 【Java SE】Java NIO系列教程(十一) Pipe
- 仿qq最新侧滑菜单
- 【高能】用PyMC3进行贝叶斯统计分析(代码+实例)
- 【Java SE】Java NIO系列教程(十二)Java NIO与IO
- 【贝叶斯系列】预测未来回报的交易算法基于Bayesian cone
- android viewgroup事件分发机制
- Rafy 领域实体框架示例(1) - 转换传统三层应用程序
- android view事件分发机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- android九宫格可分页加载控件使用详解
- WordPress用插件实现MarkDown语法支持
- Android中实现长按照片弹出右键菜单功能的实例代码
- Android Studio无法执行Java类的main方法问题及解决方法
- PlayTube优秀的视频CMS系统/支持本地和youtube导入
- Android Studio 中运行 groovy 程序的方法图文详解
- android studio按钮监听的5种方法实例详解
- AndroidStudio3.6.1打包jar及AndroidStudio4.0打包jar的一系列问题及用法
- 教你如何在js中split函数分割字符串为数组
- [折腾]小型HTTP web服务Caddy及配置PHP
- graftcp一种把指定程序的 TCP 流量重定向到代理的方法
- Flutter应用集成极光推送的实现示例
- android调用C语言实现内存的读取与修改的方法示例
- Android中网络框架简单封装的实例方法
- Auto Remove Torrents:自动删种程序部署