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按字节截取字符长度实例
Nov 20 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
php实现等比例压缩图片
2018/07/26 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
javascript的push使用指南
2014/12/05 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
深入理解javascript中的this
2021/02/08 Javascript
python设计模式大全
2016/06/27 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
使用pip安装python库的多种方式
2019/07/31 Python
Ibatis如何使用动态表名
2015/07/12 面试题
民主评议党员自我评议范文2014
2014/09/26 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
不同意离婚答辩状
2015/05/22 职场文书
预备党员转正意见
2015/06/01 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书