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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
php简单封装了一些常用JS操作
2007/02/25 PHP
php中explode函数用法分析
2014/11/15 PHP
php实现短信发送代码
2015/07/05 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
js实现碰撞检测
2021/01/29 Javascript
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
离婚撤诉申请书范本
2015/05/18 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
小学校本教研总结
2015/08/13 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android