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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue+springboot实现登录验证码
May 27 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP7新特性
2021/03/09 PHP
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
js实现图片360度旋转
2017/01/22 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
Python脚本实现格式化css文件
2015/04/08 Python
Python and、or以及and-or语法总结
2015/04/14 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
python调用win32接口进行截图的示例
2020/11/11 Python
阿巴庭院:Abba Patio
2019/06/18 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
应届大学生自荐信格式
2013/09/21 职场文书
经理助理岗位职责
2014/03/05 职场文书
我爱读书演讲稿
2014/05/07 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
体育专业自荐书
2014/05/29 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers