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 闭包在封装函数时的简单分析
Nov 28 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
简单通过settimeout看javascript的运行机制
May 10 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
3
2006/10/09 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php中yii框架实例用法
2020/12/22 PHP
JavaScript的Function详细
2006/11/14 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
一行python实现树形结构的方法
2019/08/09 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python Http请求json解析库用法解析
2020/11/28 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
写给女生的道歉信
2014/01/14 职场文书
学生打架检讨书
2014/10/20 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
入党现实表现材料
2014/12/23 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers