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 表单规则集合对象
Jul 21 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
javascript常用方法汇总
Dec 02 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
layui动态表头的实现代码
Aug 22 Javascript
简介JavaScript错误处理机制
Aug 04 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
再说下636单管机
2021/03/02 无线电
如何去掉文章里的 html 语法
2006/10/09 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
python三元运算符实现方法
2013/12/17 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python实现端口检测的方法
2018/07/24 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
如何理解委托
2012/01/06 面试题
DIY手工制作经营店创业计划书
2014/02/01 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
学校通报表扬范文
2015/05/04 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技