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获取当前日期时间并定时刷新示例
Mar 04 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
JS代码简洁方式之函数方法详解
Jul 28 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
php !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
apache php模块整合操作指南
2012/11/16 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
python随机数分布random测试
2018/08/27 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
集团薪酬管理制度
2014/01/13 职场文书
xxx同志考察材料
2014/02/07 职场文书
化学教学随笔感言
2014/02/19 职场文书
四议两公开实施方案
2014/03/28 职场文书
八项规定整改方案
2014/10/01 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
摩登时代观后感
2015/06/03 职场文书
病假条格式范文
2015/08/17 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB