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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
js获取和设置属性的方法
Feb 20 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 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
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
JavaScript 参考教程
2006/12/29 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
校本教研工作制度
2014/01/22 职场文书
中国入世承诺
2014/04/01 职场文书
取保候审保证书
2014/04/30 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
详解Vue slot插槽
2021/11/20 Vue.js