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 相关文章推荐
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
中止javascript执行的方法
Feb 14 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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
简单易用的计数器(数据库)
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php权重计算方法代码分享
2014/01/09 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python中tell()方法的使用详解
2015/05/24 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
美术学专业求职信
2014/07/23 职场文书
先进党支部事迹材料
2014/12/24 职场文书
扬州个园导游词
2015/02/06 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书