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系列(4) 立即调用的函数表达式
Jan 15 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
浅谈webpack-dev-server的配置和使用
May 17 Javascript
VUE脚手架具体使用方法
May 20 Javascript
Vue3实现简易音乐播放器组件
Aug 14 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
一个简单的PHP入门源程序
2006/10/09 PHP
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
python实现画图工具
2020/08/27 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
院药学专业个人求职信
2013/09/21 职场文书
人力资源专业推荐信
2013/11/29 职场文书
文秘专业个人求职信
2013/12/22 职场文书
中国梦的演讲稿
2014/01/08 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
交通事故协议书
2014/04/15 职场文书
2015大学生实训报告
2014/11/05 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
六年级语文教学反思
2016/03/03 职场文书