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 相关文章推荐
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
微信小程序排坑指南详解
May 23 Javascript
微信小程序实现日历功能
Nov 27 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
jquery插件实现悬浮的菜单
Apr 24 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
一个Python最简单的接口自动化框架
2018/01/02 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python提取log文件内容并画出图表
2019/07/08 Python
django 微信网页授权登陆的实现
2019/07/30 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
校班主任推荐信范文
2013/12/03 职场文书
建筑项目策划书
2014/01/13 职场文书
高中班级口号
2014/06/09 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
绿色环保倡议书
2015/04/28 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Python实现视频中添加音频工具详解
2021/12/06 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers