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 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
Angular网络请求的封装方法
May 22 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
Json解析的方法小结
2016/06/22 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python Flask-web表单使用详解
2017/11/18 Python
python实现聚类算法原理
2018/02/12 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
树莓派实现移动拍照
2019/06/22 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Pycharm github配置实现过程图解
2020/10/13 Python
python中xlutils库用法浅析
2020/12/29 Python
光声世纪笔试题目
2012/08/25 面试题
社区工作感言
2014/02/21 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
社团活动总结
2014/04/28 职场文书
大学学生会竞选稿
2015/11/19 职场文书