js中scrollTop()方法和scroll()方法用法示例


Posted in Javascript onOctober 03, 2016

本文实例讲述了js中scrollTop()方法和scroll()方法用法。分享给大家供大家参考,具体如下:

设置滚动条据顶部的高度:

$("div").scrollTop(100); //把 scroll top offset 设置为 100px

获得滚动条的高度:

$("div").scrollTop();//获得 scroll top offset

触发滚动事件

$(selector).scroll()

将函数绑定到滚动事件中:

$(selector).scroll(function)

监听滚动事件,判断当滚动到距离顶部700px时,将其position改为fixed:

$(window).scroll(function(){
var $scroll_height = $(".gray").scrollTop();
if($scroll_height > 700){
$(".hot-nav").addClass("fix-nav");
} else {
$(".hot-nav").removeClass("fix-nav");
}
})

这是jquery中的用法,

offset() 获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

top:$(this).offset().top+25+"px"

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 两个字符串时间的天数差计算
Aug 25 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
npm qs模块使用详解
Feb 07 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 #Javascript
JavaScript对象创建模式实例汇总
Oct 03 #Javascript
js实现的光标位置工具函数示例
Oct 03 #Javascript
js获取腾讯视频ID的方法
Oct 03 #Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 #Javascript
微信小程序 navigation API实例详解
Oct 02 #Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 #Javascript
You might like
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python 打印中文字符的三种方法
2018/08/14 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
python实现动态创建类的方法分析
2019/06/25 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
临床医师个人自我评价
2014/04/06 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python
css3 选择器
2022/05/11 HTML / CSS